Детский маршрут не загружается в Angular 14

Question

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

      {
    path: 'clients',
    title: 'Existing Clients',
    loadComponent: () => import('./app/clients/client-list/client-list.component').then(x => x.ClientListComponent),
    children: [
        {
            path: ':id',
            loadComponent: () => import('./app/clients/client-edit/client-edit.component').then(x => x.ClientEditComponent)
        }
    ]
}

Если я перейду к ".../clients", то загрузится правильно. Если я перехожу к ".../clients/xyz", браузер показывает правильный путь, но страница по-прежнему ClientListComponentвместо ClientEditComponent.

Что я здесь делаю неправильно?

Answer 1

Маршрут дочерних /w автономных компонентов

Обязательно импортируйте RouterModuleв массиве импорта вашего ClientListComponentи что есть роутер-розетка.

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

Вот мой очень простой Stackblitz, который я создал для вас, чтобы вы могли поиграть и сравнить его с вашим приложением.