Angular 8 - Содержимое маршрутизатора-розетки и / или именованного маршрутизатора-розетки отображается не всегда

Question

Пожалуйста, помогите мне исправить точку 1, 4 и 5. Здесь ниже.

1) Рендеринг при загрузке приложения (не отображается досье-sidenav):

2) Рендеринг, если я ввожу правильный URL-адрес в панели навигации (работает хорошо):

3) Рендеринг при нажатии на второе меню после загрузки приложения (работает хорошо):

4) Рендеринг, когда я нажимаю на второе меню, а затем на первое меню (URL-адрес неверен, а содержимое основного розетки-маршрутизатора не отображается):

5) Рендеринг, когда я нажимаю на второе меню, затем на первое меню, а затем снова на второе меню (вакансии не отображаются):

TestLibLayout /.../ shell.component.html:

<fps-navbar [sidenav]="sidenav">
  <ng-container fps-navbar-items>
    <ng-content select="[fps-navbar-items]"></ng-content>
  </ng-container>
  <ng-container fps-navbar-auth>
    <ng-content select="[fps-navbar-auth]"></ng-content>
  </ng-container>
  <ng-container fps-navbar-language>
    <ng-content select="[fps-navbar-language]"></ng-content>
  </ng-container>
</fps-navbar>

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    #sidenav
    class="sidenav"
    [fixedInViewport]="false"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="(isHandset$ | async) === false"
  >
    <ng-container #content></ng-container>

    <router-outlet name="sidenav"></router-outlet>
  </mat-sidenav>

  <main>
    <router-outlet></router-outlet>
    <ng-component></ng-component>
  </main>
</mat-sidenav-container>

TestProject /.../ app.component.html:

<fps-shell>
  <ng-container fps-navbar-items>
    <a
      mat-button
      [routerLink]="['dossier', { outlets: { sidenav: ['dossier'] } }]"
      routerLinkActive="mat-accent"
    >
      {{ 'Employee.MyDossier.Title' | translate }}
    </a>
    <a
      mat-button
      [routerLink]="[
        { outlets: { primary: ['vacancies'], sidenav: ['vacancies'] } }
      ]"
      routerLinkActive="mat-accent"
    >
      {{ 'Vacancies.Title' | translate }}
    </a>
  </ng-container>
</fps-shell>

TestProject /.../ dossier-sidenav.component.html:

<mat-nav-list>
  <a
    mat-list-item
    [routerLink]="['personal-info']"
    routerLinkActive="router-link-active"
  >
    Personal info
  </a>
  <a
    mat-list-item
    [routerLink]="['career']"
    routerLinkActive="router-link-active"
  >
    Career
  </a>
  <a
    mat-list-item
    [routerLink]="['promotion']"
    routerLinkActive="router-link-active"
  >
    Promotion
  </a>
</mat-nav-list>

TestProject /.../ vacancies-sidenav.component.html:

<mat-nav-list>
  <a
    mat-list-item
    [routerLink]="['description']"
    routerLinkActive="router-link-active"
  >
    Description
  </a>
  <a
    mat-list-item
    [routerLink]="['vacancy']"
    routerLinkActive="router-link-active"
  >
    Vacancy
  </a>
  <a
    mat-list-item
    [routerLink]="['test']"
    routerLinkActive="router-link-active"
  >
    Test
  </a>
</mat-nav-list>

TestProject /.../ app.routes.ts:

export const routes: Routes = [
{
  path: 'dossier',
  loadChildren: () =>
  import('./my-dossier/my-dossier.module').then(m => m.MyDossierModule)
},
{
  path: 'vacancies',
  loadChildren: () =>
  import('./my-vacancies/my-vacancies.module').then(
    m => m.MyVacanciesModule
  )
},
{
  path: '404',
  component: NotFoundComponent
},
{
  path: '',
  redirectTo: 'dossier',
  pathMatch: 'full'
},
{ path: '**', redirectTo: '404' }
];

TestProject / ... /my-dossier.routes.ts:

export const routes: Routes = [
{
  path: '',
  component: MyDossierContainerComponent,
  children: [
  {
    path: 'personal-info',
    component: PersonalInfoContainerComponent,
    resolve: { info: PersonalInfoResolverService }
  },
  {
    path: 'career',
    component: CareerContainerComponent,
    resolve: { careerLines: CareerLinesResolverService }
  },
  {
    path: 'promotion',
    component: PromotionContainerComponent
  },
  {
    path: '',
    redirectTo: 'personal-info',
    pathMatch: 'full'
  }
]
},
{
  path: 'dossier',
  component: MyDossierSidenavComponent,
  outlet: 'sidenav'
}
];

TestProject /.../ my-vacancies.routes.ts:

export const routes: Routes = [
{
  path: '',
  component: VacancyListContainerComponent,
  resolve: { vacancies: VacancyListResolverService }
},
{
  path: 'vacancies',
  component: MyVacanciesSidenavComponent,
  outlet: 'sidenav'
},
{
  path: ':id',
  component: VacancyDetailContainerComponent,
  resolve: { vacancy: VacancyDetailResolverService }
}
];