How to display a component from a lazy loaded module in secondary router-outlet defined in the app-component

Question

I have a lazy loaded feature module (B) which has a nav-component that should be displayed in a named router-outlet that is defined in the root app-component.

I can't get it to work when the module is lazy loaded. I have no problem in the non-lazy loaded module (A)

Sample app: https://stackblitz.com/edit/angular-nav-sample-lazy

Root routes:

const appRoutes: Routes = [
    { path: '',  redirectTo: '/A1(nav:A-Nav1)', pathMatch: 'full' },
    { path: 'A', redirectTo: '/A1(nav:A-Nav1)', pathMatch: 'full' },
    { path: 'B', loadChildren: './feature-b/b.module#BModule' },
    { path: '**', component: PageNotFoundComponent }
];

A-Module routes:

const routes: Routes = [
    { path: 'A1', component: A1Component },
    { path: 'A2', component: A2Component },
    { path: 'A3', component: A3Component },
    { path: 'A-Nav1', component: ANav1Component, outlet: 'nav' },
    { path: 'A-Nav2', component: ANav2Component, outlet: 'nav' }
];

B-Module routes:

const routes: Routes = [
    { path: 'B-Nav', component: BNavComponent, outlet: 'nav' },
    { path: 'B1', component: B1Component },
    { path: 'B2', component: B2Component },
    { path: 'B3', component: B3Component },
    { path: '', pathMatch: 'full', redirectTo: '/B/B1' },
];

app.component.html

<div id="container">
<ul>
    <!-- works fine -->
    <li [routerLink]="['/A']">A</li>

    <!-- doesn't work -->

    <li [routerLink]="['/B']">B</li>
    <li [routerLink]="[{ outlets: { primary: ['/B/B1'], nav: ['B-Nav'] } }]">B</li>
    <li [routerLink]="[{ outlets: { primary: ['B', 'B1'], nav: ['B-Nav'] } }]">B</li>
    <li [routerLink]="[{ outlets: { primary: ['B'], nav: 'B-Nav' } }]">B Nav</div>
</ul>

    <router-outlet name="nav"></router-outlet>

    <router-outlet></router-outlet>
</div>

Answer 1

To display B1Component in the primary router-outlet and the BNavComponent in the named router-outlet the url has to be B/(B1//nav:BNav)

To navigate by code:

this._router.navigate(['/B', {outlets: { primary: ['B2'], nav: ['BNav'] }}]);