Router navigate to child route - Angular 6

Question

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: ''

Answer 1

I found solution by adding profile path below '' and 'tabs' path:

  {
    path: 'profile',
    redirectTo: '/tabs/(profile:profile)',
    pathMatch: 'full'
  }

Now I am able to navigate to profile with

  this.router.navigate(['profile']);

I forgot to add this path in tabs.router.module.ts. Because of that I was getting mentioned error

Answer 2

If you want to navigate to the list route you need to make the angular know that its a child route of tabs

this.router.navigate(['/tabs/list']); or this.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 parent tabs and checks the child route if it is nothing it will navigate to pathMatch: 'full' if not it will navigate to the specific child route

In routerLink you can use the same array to match the route

Thanks, Happy coding !!

Answer 3

Mention outlets in the routerLink while navigating to particular outlet.

[routerLink]="['tabs/profile', {outlets: {'profile': ['profile'], 'list': ['none']}}]"

which will eventually generates below route

http://localhost:4200/tabs/profile/(profile:profile//list:none)

Answer 4

this.router.navigate(['/list'], {relativeTo: this.route});      //absolute
this.router.navigate(['./list'], {relativeTo: this.route});     //child
this.router.navigate(['../list'], {relativeTo: this.route});    //sibling
this.router.navigate(['../../list'], {relativeTo: this.route}); //parent
this.router.navigate(['tabs/list'], {relativeTo: this.route});
this.router.navigate(['/tabs/list'], {relativeTo: this.route});

You'll find here more information

Answer 5

Try:

this.router.navigate(['child component path'], {relativeTo: this.activatedRoute});

This solved my problem. Happy coding :)

Answer 6

It depends on from which component you wish to navigate from.

From Tabs to ListPage:

this.router.navigate(['/list'], {relativeTo: this.route});

If you're navigating from ProfilePage to ListPage (which are siblings) then, you need to use this:

this.router.navigate(['../list'], {relativeTo: this.route});

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:

constructor(private route: ActivatedRoute)

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.