I've defined my routes like this:
const routes: Routes = [
{ path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
{ path: 'faq', loadChildren: './faq/faq.module#FaqPageModule' },
{ path: 'terms', loadChildren: './terms/terms.module#TermsPageModule' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
and like this:
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: '',
redirectTo: '/tabs/(list:list)',
pathMatch: 'full',
},
{
path: 'list',
outlet: 'list',
component: ListPage
},
{
path: 'profile',
outlet: 'profile',
component: ProfilePage,
canActivate: [AuthGuardService]
}
]
},
{
path: '',
redirectTo: '/tabs/(list:list)',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
I am interested how I can navigate to ListPage or ProfilePage using router .navigate()
method in component or routerLink
in some html element.
I tried something like this
this.router.navigate(['tabs/profile']);
or
this.router.navigate(['profile']);
or
this.router.navigate(['tabs(profile:profile)']);
and got this error :
Error: Cannot match any routes. URL Segment: ''
Mention
outlets
in therouterLink
while navigating to particular outlet.which will eventually generates below route
It depends on from which component you wish to navigate from.
From Tabs to ListPage:
If you're navigating from ProfilePage to ListPage (which are siblings) then, you need to use this:
In the above code, route is the ActivatedRoute object and so it will enable relative navigation from current route. You can inject it in the constructor like this:
I was also facing the same problem once and tried everything but nothing worked. In the end, Visual Studio Code's Intellisense helped me with this. Hope it helps somebody.
Try:
This solved my problem. Happy coding :)
If you want to navigate to the
list
route you need to make the angular know that its a child route oftabs
this.router.navigate(['/tabs/list']);
orthis.router.navigate(['tabs','list']);
In router navigate you need to pass routes as an array of
string
so now the angular will find for the parenttabs
and checks the child route if it is nothing it will navigate topathMatch: 'full'
if not it will navigate to the specific child routeIn
routerLink
you can use the same array to match the routeThanks, Happy coding !!