Angular Router secondary menu from module routes

Question

I am attempting to build a secondary navigation menu from the routes specified in a module. There are two named router-outlets for a main navigation menu, and a sub menu that changes with each module you navigate to, and a third one to display content. Routes are injected into a single navigation component using Route resolvers.

Navigation works on the first click but all subsequent clicks receive an error

 Error: NG04013: Cannot activate an already activated outlet

This fix got me to working once, before that it would not work at all
Angular 7 - Multiple outlets : Error: Cannot activate an already activated outlet

Here is a working stackblitz example

Answer 1

I ended up solving this by doing 3 things

1.instead of a [routerLink] on the navigation buttons, I call a function on click to navigate programatically

<button (click)="go(route)" *ngFor="let route of routes...>

go(route: any) {
    this.router.navigate([route.route])
  }

This took care of top level menus but the module sub menu was not updating with different child module routes on navigation so

2. The route array in the navigation component is now a BehaviorSubject so new route arrays are emitted on route change. This required adding an async pipe to the ngFor loop

ngFor="let route of (routes | async)...

3. I had to set the guards and resolvers policy on the auxiliary route to 'always'

{
  path: '',
  outlet: 'module-navigation',
  pathMatch: 'full',
  runGuardsAndResolvers: 'always',
  component: NavigationComponent,
  resolve: { routes: ModuleNavigationResolver, menuType: () => "SECONDARY"}
}

stackblitz has been updated