Angular 9.0 'router-outlet' - неизвестный элемент в загруженном модуле

Question

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

, выдается ошибка 'router-outlet' is not a known element:in lazy loaded module.

В дочернем модуле я импортирую и экспортирую RouterModule.

const routes: Routes = [
  {
    path: '',
    component: ProfileComponent,
    children: [
      {path: '', pathMatch: 'full', component: PostsComponent},
      {path: 'media', component: MediaComponent},
      {path: 'settings', component: SettingsComponent},
    ]
  }
];

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

и модуль профиля (модуль, который я пытаюсь реализовать) Я импортирую Профиль

@NgModule({
  declarations: [PostsComponent, MediaComponent, SettingsComponent],
  imports: [
    CommonModule,
    SharedModule,
    ProfileRoutingModule
  ]
})
export class ProfileModule {
}

и часть AppRoutingModule

{
   path: 'profile',
   loadChildren: () => import('./profile/profile.module')
     .then(m => m.ProfileModule)
}

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

Answer 1

Я предполагаю, что вы забыли экспортировать RouterModule в AppRoutingModule. Stackblitz для воспроизведения ошибки: https://stackblitz.com/edit/angular-jd3ehv?file=src%2Fapp%2Fapp-routing.module.ts

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: "recipe",
        loadChildren: () =>
          import("./recipe/recipe.module").then(mod => mod.RecipeModule)
      }
    ])
  ],
  exports: [RouterModule] // <==== add this line
})
export class AppRoutingModule {}