Дочерний маршрут Angular 5 загружается на маршрутизаторе-выходе корневого уровня при использовании loadchildren в маршрутизации

У меня есть компонент корневого приложения с маршрутизатором-выходом, и маршруты загружаются из маршрутов домашнего модуля, который использует ленивую загрузку с loadchildren в своих дочерних маршрутах. В домашнем компоненте есть выход-маршрутизатор, а также есть выходы-маршрутизаторы во всех дочерних модулях дома, которые загружаются лениво. Маршруты работают нормально, но дочерние маршруты также загружаются в корневой выход маршрутизатора. Например: - компонент testCreateComponent загружается с localhost: 4200 / test / create, а также localhost: 4200 / create.

Примеры уровней кода следующие: -

app.component.html

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

app-routing.module.ts

export const APP_ROUTES: Routes = [
    {path: '**', redirectTo: '', pathMatch: 'full'}
];

home.component.html

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

home-routing.module.ts

const routes: Routes = [{
  path: '',
  component: HomeComponent,
  canActivate: [LoggedUserGuard],
  canActivateChild: [AuthGuard],
  children: [
    {path: '', redirectTo: 'dashboard', pathMatch: 'full'},
    {
      path: 'test',
      loadChildren: () => testModule
    },
    {
      path: 'dashboard',
      component: DashboardComponent,
      data: {
        breadcrumb: 'Dashboard'
      }
    },
    {
      path: 'dummy',
      loadChildren: () => dummyModule,
    }
  ]
}];

testComponent.html

<div>Test</test>
<router-outlet></router-outlet>

test-routing.module.ts

const routes: Routes = [{
  path: '',
  component: TestComponent,
  children: [
    {path: '', component: ListComponent,
      data: {
        breadcrumb: 'List'
      }},
    {path: 'create', component: testCreateComponent},
    { path: 'detail/:id',
      component: TestEditComponent,
    }
  ]
}];

typescript angular router router-outlet
person crystalthinker    schedule 03.01.2018    source источник
comment
Вы установили RouterModule.forRoot и RouterModule.forChild в соответствующих модулях?   -  person Ajay Dharnappa Poojary    schedule 04.01.2018
comment
forRoot в приложении и другие для детей   -  person crystalthinker    schedule 04.01.2018
comment
Да, NgModule - ›импорт: [RouterModule.forRoot (routes)] и в дочернем модуле маршруты NgModule -› импорт: [RouterModule.forChild (testRoutes)], затем экспорт: [RouterModule]   -  person Ajay Dharnappa Poojary    schedule 04.01.2018

Ответы (1)


arrow_upward
1
arrow_downward

Проблема, скорее всего, в том, как вы импортируете свои лениво загруженные модули.

У нас была аналогичная проблема с лениво загруженными модулями, которые были ошибочно импортированы явно / нетерпеливо в разделе импорта TypeScript в верхней части файла модуля (вместо встроенного только в функции loadChildren).

Чтобы легко найти их в огромном проекте, я думаю, мы настроили маршрутизатор с preloadingStrategy: PreloadAllModules, вышли из системы router.config и проверили маршруты и их компоненты. Удаление импорта из раздела импорта TypeScript в верхней части модуля (и оставление их только встроенными) устранило проблему.

Попробуйте удалить

import { testModule } from "./path/to/file/containing/test.module";

сверху вашего файла и вместо этого используйте в маршруте только следующее

loadChildren: () => import("./path/to/file/containing/test.module").then((m) => m.testModule)

Также ознакомьтесь с Angular Docs: Устранение неполадок модулей с отложенной загрузкой

person Christian    schedule 25.06.2021