Угловые отдельные компоненты с вложенным ребенком и маршрутизацией ⇐ Javascript

[Anonymous]

Я рефакторирую свою существующую кодовую базу в автономную архитектуру. Я сталкиваюсь с проблемой с маршрутизацией. Ниже приведен мой текущий модуль маршрута < /p>

Код: Выделить всё

  const ROUTES: Routes = [
{
path: '',
component: ParentComponent,
children: [
{
path: 'alt',
component: HomePageComponent,
children: [
{
path: 'abc',
loadChildren: () =>
import(
'
'
).then((m) => m.AbcModule)
},
{
path: 'xyz',
loadChildren: () =>
import('path to xyz module').then(
(m) => m.XyzModule
)
},

]
}
]
}
];
< /code>
 маршрутизация модуля ABC < /h2>
  const ROUTES: Routes = [
{
path: '',
component: AbcComponent,
children: [
{
path: 'Child1',
component: Child1Component
},
{
path: 'child2',
component: Child2Component
},
{
path: '',
pathMatch: 'full',
redirectTo: 'child1'
}
]
}
];
< /code>
Вышеуказанные два являются частью моего MFE и имеют боковую полосу, которая находится в родительском проекте со следующей конфигурацией маршрутизации < /p>
[
{
label: 'ABC',
route: `/alt/abc`,
},
{
label: 'Xyz',
route: `/alt/xyz`,
}
];
< /code>
Это работает, как и ожидалось в существующей архитектуре Ngmodule. Проблема возникает, когда я изменил его на автономную архитектуру со следующими маршрутами и main.ts 

Aapp.route.ts

Код: Выделить всё

export const APP_ROUTES: Routes = [
{
path: '',
component: AppComponent,
children: [
{
path: 'alt',
loadChildren: () =>
import('
').then((m) => m.PARENT_ROUTES)
}
]
}
];
< /code>
 маршрут родительского компонента < /h2>
export const PARENT_ROUTES: Routes = [
{
path: '',
loadComponent: () =>
import('./parent.component').then((m) => m.ParentComponent),
children: [
{
path: 'abc',
loadChildren: () =>
import('').then((m) => m.ROUTES)
},
{
path: '',
redirectTo: 'abc',
pathMatch: 'full'
},
{
path: '**',
redirectTo: 'error',
pathMatch: 'full'
}
]
}
];
< /code>
 маршрут компонента ABC < /h2>
export const ROUTES: Routes = [{
path: '',
loadComponent: () =>
import('').then(
(m) => m.ABCComponent
),
children: [
{
path: '',
pathMatch: 'full',
redirectTo: 'child1'
},

{
path: 'child1',
loadComponent: () =>
import('path to child 1 component').then((m) => m.Child 1 component),
}
]
}
];

Я только что добавил маршруты только для ABC и его ребенка.

Код: Выделить всё

alt/abc/child1

. Но его навигация только до

Код: Выделить всё

alt/abc

[/b]. Я добавил в ParentComponent, также компонентах ABC.

Код: Выделить всё

bootstrapApplication(AppComponent, appConfig)

Также я добавил Providerouter (app_routes) in app.config.ts .


Подробнее здесь: https://stackoverflow.com/questions/796 ... nd-routing