Angular 7 дубликатов компонентов, отображаемых в роутере

Question

Это происходит только иногда (обычно после открытия приложения утром).

Мы используем SwUpdate для обновления приложения, и это поведение, похоже, совпадает со временем обновления. Результат html выглядит следующим образом:

<app-root _nghost-vrt-c0="" ng-version="7.2.15">
  <router-outlet _ngcontent-vrt-c0=""></router-outlet>
  <app-layout _nghost-vrt-c4="">
    <div _ngcontent-vrt-c4="" class="app-class">
          <router-outlet _ngcontent-vrt-c4=""></router-outlet>
          <app-component-1 _nghost-vrt-c7="">
          </app-component-1>
          <app-component-1 _nghost-vrt-c7="">
          </app-component-1>
    </div>
  </app-layout>
</app-root>

Проблема в дубликате app-component-1. В нормальных ситуациях это только делает один раз. Я не смог найти решение или даже вопрос, который описывает это. Цени любую помощь.

Соответствующие правила маршрутизации:

const routes: Routes = [
  {
    path: '',
    component: Layout,
    canActivate: [AuthGuard],
    children: [
      { path: 'home', loadChildren: './home/home.module#HomeModule'},
      { path: 'otherRoute', loadChildren: './otherRoute/otherRoute.module#OtherRouteModule'},
      { path: '', redirectTo: 'home', pathMatch: 'full' },
    ]
  }
  { path: 'under-construction', component: UnderConstructionComponent, data: { title: 'Under Construction' } },
  { path: '**', redirectTo: 'under-construction' },
]

вот шаблон макета:

<div class="tm-app">
<div >
  <app-menu></app-menu>
  <div>
    <div>
      <app-top-bar></app-top-bar>
    </div>
    <router-outlet></router-outlet>
  </div>
</div>

Я вычистил столько же как я мог из макета и вывода, чтобы сохранить базу кода в безопасности. Я редактирую этот вопрос, чтобы поднять его. Потому что я еще не нашел решения. Это нормально?

Answer 1

В моем конкретном случае проблема была связана с охраной маршрута, реализующей CanActivate https://angular.io/api/router/CanActivate. Когда охранник возвращает false, маршрут не может активироваться (но он уже был создан). Если в то же время охранник также перенаправляет на другой маршрут. Затем создается дублированный компонент маршрутизатора-розетки.

Решение: не перенаправлять из службы охраны маршрута CanActivate. Вернуть только true или false. Альтернативное решение: выполните перенаправление из защиты CanActivate и всегда возвращайте true (при перенаправлении в защиту).

Надеюсь, это поможет.