Ionic 6, navigating from a tab to a new component => Cannot match any routes

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.

Ahhh the art of losing time…

I was doing this this.router.navigate([‘/tab1/main-concept’])

instead of this.router.navigate([‘tabs/tab1/main-concept’])