Ionic 4 tabs navigation error

Ionic Framework
1

Hello all,
I am working on an app where on click of a button redirects to a new page with tabs “project-details”. I have created the routing for the page too. Here is the routing:

const routes: Routes = [
  {
    path: 'project-details',
    component: ProjectDetailsPage,
    children: [
      {path: 'pd-tabs-info',children: [{path: '',loadChildren: './pd-tabs-info/pd-tabs-info.module#PdTabsInfoPageModule'}]},
      {path: 'pd-tabs-scope',children: [{path: '',loadChildren: './pd-tabs-scope/pd-tabs-scope.module#PdTabsScopePageModule'}]},
      {path: 'pd-tabs-contacts',children: [{path: '',loadChildren: './pd-tabs-contacts/pd-tabs-contacts.module#PdTabsContactsPageModule'}]},
      {path: 'pd-tabs-news',children: [{path: '',loadChildren: './pd-tabs-news/pd-tabs-news.module#PdTabsNewsPageModule'}]},
      {path: 'pd-tabs-milestones',children: [{path: '',loadChildren: './pd-tabs-milestones/pd-tabs-milestones.module#PdTabsMilestonesPageModule'}]},
      {path: '',redirectTo: '/project-details/pd-tabs-info',pathMatch: 'full'}
    ]
  },
  {
    path: '',
    redirectTo: '/project-details/pd-tabs-info',
    pathMatch: 'full'
  }
];

But i get the below error and the page won’t initialize:
Error: Cannot match any routes. URL Segment: 'project-details/pd-tabs-info'

Please help. Thanks in advance!

2

Hi @mavillavishnu :wave:

Does it fail when just loading the tabs at /project-details or when you click the tab to go to /project-details/pd-tabs-info?

Best,
Rodrigo

3

It fails when loading tabs at /project-details

4

I’m asuming you have these routes defined in a page module like tabs.router.module.ts and not in app-routing.module.ts, right?

Maybe double checking everything with the tabs starter may help: https://github.com/ionic-team/starters/blob/master/angular/official/tabs/src/app/tabs/tabs.router.module.ts

Best,
Rodrigo