Angular роутер в дочернем компоненте ничего не показывает

Question

app.component. html:

<router-outlet></router-outlet>

app.routing.module.ts

{
path: 'app',
component: MainLayoutComponent,
children: [
  {
    path: 'travels',
    loadChildren: () => import('./modules/travels/travels.module').then(m => m.TravelsModule),
  },
],

},

main-layout.component. html

<router-outlet></router-outlet>

MainLayoutComponent загружен правильно, потому что, если я пишу "console.log (" TEST "), он правильно печатается в консоли, но дочерний компонент не загружен.

travel-.module.ts

import { NgModule } from '@angular/core';

import { TravelsRoutingModule } from './travels-routing.module';
import { SharedModule } from 'src/app/shared/shared.module';

import { TravelsListComponent } from './travels-list/travels-list.component';

const SHARED_COMPONENTS = [TravelsListComponent];

@NgModule({
  declarations: [...SHARED_COMPONENTS],
  imports: [TravelsRoutingModule, SharedModule],
})
export class TravelsModule {}

travel-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { TravelsListComponent } from './travels-list/travels-list.component';

const routes: Routes = [
  {
    path: '',
    component: TravelsListComponent,
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class TravelsRoutingModule {}

Answer 1

Я нашел решение:

ПРОБЛЕМА: MainLayoutComponent объявлен в SharedModule , а не в AppModule.

Но в SharedModule не импортируется RouterModule

Answer 2

Вещи, которые стоит проверить (извините, если они очевидны):

1. Является ли main-layout.component. html правильно ли импортировано в MainLayoutComponent?
2. Есть ли ошибки в консоль обозревателя, которая может препятствовать правильной загрузке?
3. Загружается ли модуль отложенной загрузки на вкладке сети обозревателя?
4. Если вы создаете дочерний маршрут как стандартный маршрут, а не как ленивый загруженный модуль это работает?