CODEWITHSUNDEEP
angularionic-frameworkionic4angular-router
WisePlatypus
WisePlatypus

Reputation: 118

Ionic v4 nested tabs

I'm migrating my app from v3 to v4 and I had nested tabs.

I can't figure it to work, the first level is working just fine, the page of the nested tab is loading fine (without loading its sub tabs) but when I click one of my tab the error

ERROR Error: "[object Object]"
     resolvePromise11Angular

as when I input a wrong route in a tab. Here are my routes

app-routing.module.ts :

const routes: Routes = [
  ...
  { path: 'tab', loadChildren: './pages/main-tabs/main-tabs.module#MainTabsPageModule' },
  ...
];

Main tabs modules routes:

const routes: Routes = [
  {
    path: '',
    component: MainTabsPage,
    children: [
      {
        path: 'tab1',
        loadChildren: '../tab1/tab1.module#tab1PageModule'
      },
      {
        path: 'tab2',
        loadChildren: '../tab2/tab2.module#tab2PageModule'
      },
      {
        path: 'subTabs',
        loadChildren: '../subTabs/subTabs.module#subTabsPageModule'
      }
    ]
  }
];

route in subTabs module

const routes: Routes = [
  {
    path: '',
    component: ProfilePage,
    children: [
      {
        path: 'subTab1',
        loadChildren: '../subTab1/subTab1.module#subTab1PageModule'
      },
      {
        path: 'subTab2',
        loadChildren: '../subTab2/subTab2.module#subTab2PageModule'
      },
      {
        path: 'subTab3',
        loadChildren: '../subTab3/subTab3.module#subTab3PageModule'
      },
    ]
  }
];

When I click on the sub tab I get the error

Each pages are on the same folder. And the links are right since I tested the subTab in the main tab and they work.

app
  app-routing.module.ts
  pages
    main-tab
       ...
    tab1
       ...
    tab2
       ...
    subTabs
       ...
    subTab1
       ...
    subTab2
       ...
    subTab3
       ...
    subTab2
       ...

The ion-tab-button tab properties has the same name as the path of the right children

Upvotes: 1

Views: 1657

Answers (1)

WisePlatypus
WisePlatypus

Reputation: 118

Ok I kinda worked around it and it seems the problems comes from the way ion-tab-button navigate throught the route. If I replace the buttons with a simple "a routerlink" on the sub tab it works just fine.

So I'll guess I'll do the navigation manually with a click event and activate the sub tab button manually

Upvotes: 2

Related Questions