Named Router-Outlets are not navigating with window url [Hopefully Simple]

[wakawaka54]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[x] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

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>

Expected behavior

Expected behavior is to navigate router-outlets regardless of outlet name to the correct component based on the window path.

Minimal reproduction of the problem with instructions

• STEPS TO REPRODUCE *
• Create routing as above in app.routing.ts.
• Create a submodule as above in app-central.routing.ts
• Navigate to /app/dashboard and see if the navbar outlet changes.

What is the motivation / use case for changing the behavior?

Need to change the navbar based on the URL of the open window. The navbar will need to be different per the route.

Environment

Angular version: ^4.0.0

Browser:
- [x ] Chrome (desktop) version 63
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

[wakawaka54]

I figured it out, I had to make the Navbar route more restrictive because it was being picked up even with /app/dashboard. The new app.routing.ts is as follows:

export const routes: Routes = [
  { 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 }
];

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}