Hello,
I have generated a new app using the ionic generator using tabs. Everything is working fine, I was able to add content to the tab1, I can navigate to the other tabs.
Next, there is a button on the tab1 content that when pressed would navigate to a new component, all within the tab1. However, I keep getting this error:
ERROR Error: Uncaught (in promise): Error: NG04002: Cannot match any routes. URL Segment: ‘tab1/main-concept’
Error: NG04002: Cannot match any routes. URL Segment: ‘tab1/main-concept’
I’m getting a bit frustrated, I feeling I’m misunderstanding routing with tabs.
So, here is my tabs-routing.module.ts, pretty much what was automatically generated.
const routes: Routes = [
{
path: ‘tabs’,
component: TabsPage,
children: [
{
path: ‘tab1’,
loadChildren: () => import(‘…/tab1/tab1.module’).then(m => m.Tab1PageModule)
},
{
path: ‘tab2’,
loadChildren: () => import(‘…/tab2/tab2.module’).then(m => m.Tab2PageModule)
},
{
path: ‘tab3’,
loadChildren: () => import(‘…/tab3/tab3.module’).then(m => m.Tab3PageModule)
}
]
},
{
path: ‘’,
redirectTo: ‘/tabs/tab1’,
pathMatch: ‘full’
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
})
export class TabsPageRoutingModule {}
In my tab1-routing.module.ts, I have the following:
const routes: Routes = [
{
path: ‘’,
component: Tab1Page,
}
,{
path: ‘main-concept’,
loadChildren: () => import(‘./main-concept/main-concept.module’).then((m) => m.MainConceptPageModule),
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class Tab1PageRoutingModule {}
What am I missing? I would appreciate your help.