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.

Answer 1

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.