Angular 4 Router not changing named router outlets based on route

Question

When I navigate to / the correct NavbarComponent shows up on the router-outlet named 'navbar'. However, when I navigate to /app/dashboard the AppCentralNavbarComponent does not show up on the router-outlet named 'navbar', instead the error:

ERROR Error: Uncaught (in promise): Error: Cannot activate an already activated outlet Error: Cannot activate an already activated outlet

is thrown.

app.routing.ts

export const routes: Routes = [
  { path: '', component: NavbarComponent, outlet: 'navbar' },
  { path: 'account', loadChildren: './features/account/account.module#AccountModule' },
  { path: 'app', loadChildren: './features/app-central.module#AppCentralModule' },
  { path: '*', component: HomeComponent }
];

app-central.routing.ts

    export const routes: Routes = [
      { path: 'dashboard', component: DashboardComponent },
      { path: '', component: AppCentralNavbarComponent, outlet: 'navbar' },
      { path: '', component: AppCentralSidebarComponent, outlet: 'sidebar' }
    ];

standard-layout.component.html

<div>
  <router-outlet name="navbar"></router-outlet>
</div>
<div class="container-fluid">
  <o-app-alert></o-app-alert>
  <o-sidebar></o-sidebar>
  <o-body></o-body>
  <router-outlet name="popup"></router-outlet>
</div>

If you want to see better formatted code: https://github.com/angular/angular/issues/19001

How do I get Named Router Outlets to navigate to along with the non-named router outlets based on the route configuration?

There's lots of examples on how to do this with routerLink but nothing really about it by just using route configuration.

I'm not sure this is supposed to work. Try navigating to named outlets using routerLink or router.navigate(). There are some answers with examples (also in angular.io) — Günter Zöchbauer
So I thought about that but then everytime I route from a page that has another type of 'navbar' to a page with a new navbar component, I'll have to basically make sure I change the navbar component too. Hmmm. It seems really redundant. — Alex

Alex Alex · Accepted Answer · 2017-09-01T20:42:35

Okay so actually I figured this out on my own.

Adding the following helped debug greatly.

RouterModule.forRoot(routes, { enableTracing: true})

I had to make the following modifications to app.routing.ts

  { path: 'account/*', component: NavbarComponent, outlet: 'navbar' },
  { path: '', component: NavbarComponent, pathMatch: 'full', outlet: 'navbar' },
  { path: 'account', loadChildren: './features/account/account.module#AccountModule' },
  { path: 'app', loadChildren: './features/app-central.module#AppCentralModule' },
  { path: '*', component: HomeComponent }

The { path: '', component: NavbarComponent, outlet: 'navbar' } route was being resolved for /app/dashboard so I had to make the route more restrictive.

Angular 4 Router not changing named router outlets based on route

1 Answers