Cannot navigate to nested / child route using parent router

Question

I previously used ui-router in AngularJS, then Angular 2+. I would like to switch to @ angular / router simply because it is more supported and more libraries are built on it (ui-router-ng2 is still in beta!)

My problem is that I use the main template, which called waypoints, because the main template has static headers and footers that are reused. (there is also a sidebar that I took out for brevity)

My problem is that as soon as I get to my router '/ mainDashboard', I can’t move from this route to the next sub-child route '/ otherDashboard', trying to use the named socket of the router in the contents of the main template

How can I go to my route in the thirteenth line of my code below. There is also plunker https://plnkr.co/edit/RErIiby535x0toaA02W4?p=preview

Here is my code

import { NgModule, Component } from '@angular/core'; import { RouterModule, Router } from '@angular/router'; import { BrowserModule } from '@angular/platform-browser'; @Component({ selector: 'app-home', template: '<button (click)="go()">Go To Other Dashboard</button>' }) export class HomeComponent { constructor( public router: Router ) {} go(){ //THIS ERRORS this.router.navigate(['../dashboard',{outlets: {'content': ['../dashboard/mainDashboard/otherDashboard']}}]); } } @Component({ selector: 'app-main-dashboard', template: ` <header>My Static Header</header> <div id="main-container" class="main-background"> <router-outlet name="content"></router-outlet> </div> <footer>My Static Footer</footer> ` }) export class MainDashboardComponent { constructor() {} } @Component({selector: 'app-login',template: '<button (click)="login()">Login</button>'}) export class LoginComponent { constructor(public router: Router) { }; login(){ this.router.navigate(['/dashboard',{outlets: {content: ['mainDashboard']}}]); } } @Component({selector: 'app-other-dashboard', template: '<h1>Hello Other Dashboard</h1>'}) export class OtherDashboardComponent{ constructor() { } } export const routes: Array<any> = [ {path: '',component: LoginComponent }, {path: 'dashboard', component: MainDashboardComponent, children: [ {path: 'mainDashboard',component: HomeComponent,outlet: 'content', children: [{path: 'otherDashboard',component: OtherDashboardComponent, outlet: 'content'}] } ] } ] @Component({ selector: 'app-root', template: '<router-outlet></router-outlet>'}) export class AppComponent {} @NgModule({ declarations: [ AppComponent, LoginComponent, MainDashboardComponent, HomeComponent, OtherDashboardComponent], imports: [ BrowserModule, RouterModule.forRoot(routes) ], providers: [], bootstrap: [AppComponent], }) export class AppModule { } 

Answer 1

After playing with your plunger code, I found this problem. Since your otherDashboard is a child of mainDashboard , it is expected that for otherDashboard inside the mainDashboard router mainDashboard will be router output. Once this is added, I was able to switch to otherDashboard using router.navigateByUrl So, your HomeComponent will look like this:

 @Component({ selector: 'app-home', template: '<button (click)="go()">Go To Other Dashboard</button><router-outlet name="content"></router-outlet>' }) export class HomeComponent { constructor( public router: Router ) {} go(){ //Error gone this.router.navigateByUrl('/dashboard/(content:mainDashboard/(content:otherDashboard))'); } } 

If you want to replace HomeComponent with OtherDashboardComponent with MainDashboardComponent itself, then in both otherDashboard and mainDashboard should be children of the same parent who are HomeComponent

Working code: https://plnkr.co/edit/jYOMNhbE3lX5UYmjS7qy?p=preview