Понимание Угловой маршрутизации в функциональном модуле

Question

Маршрутизация определена так же, как в моем app-routing.module.ts

[
   {path: 'xyz', loadChildren: './child/child.module#ChildModule'}
]

и child-routing.module.ts как

[
    {path: '', component: ChildComponent},
    {path: ':id', component: ChildComponent}
]

Когда я посещаю маршрут localhost:4200/xyz, он загружает ожидаемый ChildComponent.

Но когда я иду на localhost:4200/, он загружает ChildComponent. Этого не ожидалось, так как я предположил, что это parent_route, т.е. xyz плюс child_route.

Как ограничить угловой от нагрузки ChildComponent на /

Пример размещен на StackBlitz https://stackblitz.com/edit/angular-xts7bc

Answer 1

Вы пытаетесь lazy-load ParentModule и ChildModule, но вы импортировали оба из них, в AppModule и ParentModule соответственно. Маршрутизатор не соответствует определенным маршрутам в Parent и AppModule, но они соответствуют ChildModule, поэтому вы получаете этот компонент даже в корне ('/').

Чтобы исправить это, удалите ParentModule из массива импорта AppModule и удалите ChildModule из импорта ParentModule.