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

Boxwood

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

Boxwood

Answer 2

Try:

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

This solved my problem. Happy coding :)

Lashondalashonde

don't forget to add import { ActivatedRoute } from '@angular/router'; – Lm

Answer 3

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

Synonymy

Welcome to stackoverflow. In addition to the answer you've provided, please consider providing a brief explanation of why and how this fixes the issue. – Padre

Not useful. Consider adding details on what each option does. – Unprintable

Even tho this is lacking a bit of text, it did help. The comments are enough to get the point. – Able

Answer 4

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 !!

Chlorous

I don't know what I'm doing wrong but same error is displayed for both options. "Error: Cannot match any routes. URL Segment: 'tabs'" – Tintoretto

You are using lazy loading right - when you try to navigate to TabsPageModule the route will be empty and try to find the path so i have doubt here - redirectTo: '/tabs/(offers:offers)' what does this meant to be because i don't see any route with name offers here the code get confused – Chlorous

just edited code, but when I change to redirectTo: '/tabs/(list:list)' this is not working – Tintoretto

Just make it as /tabs/list this will render ListPage component the initial navigation will work or use /tabs this will render the TabsPage component - Finally i don't think the children routes require a pathMatch remove that and check once – Chlorous

In the children array for the path=" " bind the component ListPage don't redirect to the same list route remove redirect and remove pathMatch and add component so now if it's only 'tabs' will render both TabsPage and ListPage component when the route is tabs hope this will work - and in your parent redirect just mention the route name as 'tabs' it will automatically pick that route – Chlorous

Answer 5

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.

Sulphurate

Answer 6

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)

Defeat