Угловая маршрутизация не работает правильно с ленивой загрузкой

Question

В моем приложении Angular, когда я открываю ссылку localhost: 4200 (приложение обслуживает его), я хочу, чтобы мое приложение перенаправляло меня на localhost: 4200 / notes. И я хочу видеть данные примечания-компонента, который содержится в основном компоненте.

Пример (текст на html-странице):

App component
Main component
Notes-page component

Но я вижу только localhost: 4200 (без перенаправления) и данные примечания-компонента, без основного компонента.

Пример (текст на html-странице):

App component
Notes-page component 

Почему это работает так? И как я могу это исправить?

Структура файлов:

/app
  /containers
    /main
      /notes-page
        notes-page.routing.ts
        notes-page.component.ts
        notes-page.module.ts
    main.routing.ts
    main.component.ts
    main.module.ts
  app.routing.ts
  app.component.ts
  app.module.ts

Файлы:

app.routing.ts

export const routing: ModuleWithProviders = RouterModule.forRoot([
  {
    path: '',
    loadChildren: './containers/main/main.module#MainModule'
  }
]);

app.component.html

<h5>App component</h5>
<router-outlet></router-outlet>

main.module.ts

export const routing: ModuleWithProviders = RouterModule.forChild([
  {
    path: '',
    component: MainComponent,
    children: [
      {
        path: '',
        redirectTo: 'notes',
        pathMatch: 'full'
      },
      {
        path: 'notes',
        loadChildren: './notes-page/notes-page.module#NotesPageModule'
      }
    ]
  }
]);

main.component.html

<h5>Main component</h5>
<main> 
  <router-outlet></router-outlet>
</main> 

примечания-page.module.ts

export const routing: ModuleWithProviders = RouterModule.forChild([
  {
    path: '',
    pathMatch: 'full',
    component: NotesPageComponent
  }
]);

примечания-page.component.html

<h5>Notes-page component</h5>

Answer 1

Проверьте это: - файл app.routing.ts должен иметь импортированный MainComponent и импортированный в app.module.ts:

export const routing: ModuleWithProviders = RouterModule.forRoot([
  {
    path: '',
    component: MainComponent,
    children: [
        { path: '', redirectTo: 'notes', pathMatch: 'full'},
        {
          path: 'notes',
          loadChildren: './notes-page/notes-page.module#NotesPageModule'
        }
    ]
  }
]);

Вам не нужен main.module.ts