Почему при Angular 8 отложенной загрузке этот элемент перенаправляется и дважды внедряется в розетку маршрутизатора?

Question

Я недавно впервые выполнил модульное приложение Angular 8, что было достаточно просто, но когда я начал реализовывать отложенную загрузку, с маршрутизацией стали происходить странные вещи. Это основная проблема:

Вместо того, чтобы встраивать компонент Overview, а также панель мониторинга (панели навигации и все), в ней должны открываться выбранные компонент (пользователи, в случае этого примера).

Вот мой ленивый код загрузки:

app.routes.ts

export const ROUTES: Routes = [
  {
    path: 'dashboard',
    component: LayoutComponent,
    canActivate: [OktaAuthGuard],
    canActivateChild: [CanActivateRoute],
    children: [
      {
        path: 'overview',
        component: OverviewComponent,
        data: { title: 'Overview', requiredRoles: [Role.SALESPERSON] }
      },
      {
        path: 'users',
        loadChildren: () =>
          import('./dashboard/users/users.module').then(m => m.UsersModule),
        data: { title: 'Users', requiredRoles: [Role.SALES_ADMIN] }
      },
      {
        path: 'online-orders',
        loadChildren: () =>
          import('./dashboard/online-orders/online-orders.module').then(
            m => m.OnlineOrdersModule
          ),
        data: {
          title: 'Online Orders',
          requiredRoles: [Role.SALES_ADMIN]
        }
      },
      {
        path: 'salesperson',
        loadChildren: () =>
          import('./dashboard/salesperson/salesperson.module').then(
            m => m.SalespersonModule
          ),
        data: {
          title: 'Salesperson',
          requiredRoles: [Role.SALESPERSON]
        }
      }
    ]
  },
  {
    path: 'dashboard/unauthorized',
    component: UnauthorizedComponent,
    data: { title: 'Unauthorized' }
  },
  { path: 'implicit/callback', component: OktaCallbackComponent },
  { path: 'login', component: LoginComponent },
  {
    path: 'dashboard/error',
    component: ErrorComponent,
    data: { title: 'Error' }
  },
  { path: '**', redirectTo: 'dashboard/overview' }
];

Судя по этой информации в консоли, которую я получил с помощью enableTracing, я предполагаю, что одна из основных проблем заключается в том, что она перенаправляется вместо перехода к нужному компоненту:

RoutesRecognized {
    id: 4, 
    url: "/dashboard/users", 
    urlAfterRedirects: "/dashboard/users/dashboard/overview/", 
    state: RouterStateSnapshot
}

Как вы можете видеть вместо того, чтобы просто перейти к /dashboard/users, он добавляет второй /dashboard/ в конец, а также перенаправляет на /overview/ поверх этого.

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

app.component. html

<div class="app-content">
    <router-outlet></router-outlet>
</div>

макет. компонент. html

<div class="app-content">
    <mat-sidenav-container>
    <mat-sidenav mode="side" opened="true">
        <app-nav-menu></app-nav-menu>
    </mat-sidenav>
    <app-top-menu></app-top-menu>
    <section>
        <router-outlet></router-outlet> //<----
    </section>
    </mat-sidenav-container>
</div>

Что я делаю не так? Я попытался:

• Ленивая загрузка компонента Обзор (Открытие страницы создает бесконечное l oop)
• Переименование одного из выходов маршрутизатора (Разбивает маршрутизацию и выдает ошибки в консоль)

Я младший разработчик, и я все еще изучаю, как составляются приложения Angular (особенно с маршрутизацией), так что, надеюсь, кто-то может помочь мне увидеть то, что я мог пропустить , Я видел подобные проблемы с этим, но ни один, где компонент внедряется в себя как это.

Answer 1

Я считаю, что проблема в том, что у вас есть ваш AppComponent. html с выходом маршрутизатора и без использования компонента приложения внутри вашего маршрута. Таким образом, основное приложение оказывается внутри этого. Если вы осмотрите html, вы увидите, что приложение находится внутри:

<div class="app-content">
    <router-outlet></router-outlet>
</div>

, а также внутри:

<section>
        <router-outlet></router-outlet> //<----
    </section>

Хотя вы не знаете, как его решить. Вы можете попробовать один из двух. Либо удалите розетку маршрутизатора из вашего app.component. html, либо проверьте это:

export const ROUTES: Routes = [
{
  path: '',
 component: AppComponent,
children: [

  {
    path: 'dashboard',
    component: LayoutComponent,
    canActivate: [OktaAuthGuard],
    canActivateChild: [CanActivateRoute],
    children: [

et c. Это может потребовать некоторых настроек, чтобы заставить его работать. Но обычно это то, что вы делаете, когда верхний уровень имеет путь '', а затем в качестве дочернего элемента указывает маршрут.

Если это не сработает, проверьте ваш html и сообщите, что вы видите в html это очень полезный инструмент для отладки, если то, что я подозреваю выше, не так.