Angular 10 个组件未加载到路由器插座中

Question

在 Angular10 中构建新应用时，我遇到了组件未按预期加载的问题。

StackBlitz

样板代码或多或少直接从我在 Angular 9 中制作的另一个项目中复制，在那里它工作得很好，虽然我似乎记得在某个时候遇到过类似的问题，但不记得解决方案.

问题简述
只有 AppComponent 正在加载。该组件有一个 router-outlet 应该加载 ShellComponent 及其子组件通过 ShellService.

注入

URL 重定向有效，因为我在启动时按预期被重定向到 /cases/current，所以我知道所有模块都已正确加载。

我有什么tried/researched

我查看了 Angular 10 的文档，看看版本 9 是否有任何可能导致此问题的更改，但找不到任何相关的内容。

我尝试禁用 Ivy、禁用 AOT 和禁用构建优化以查看它是否有任何不同 - 结果没有。

我还尝试从 ShellModule 中导出 ShellComponent 并将其直接加载到 AppComponent HTML 中，这导致 ShellComponent 出现, 但仍然没有子组件。

最终分辨率
多亏了下面的答案，我才能够创建一个有效的解决方案。 StackBlitz link 对于任何感兴趣的人。

Answer 1

您需要在 app-routing.module 中提供与这些模块相关的路由，我猜您想延迟加载这些模块，将您的 app-routing.module 修改为：

const routes: Routes = [
  { path: '*', redirectTo: '', pathMatch: 'full' },
  {
    path: 'shell', loadChildren: () => import('./shell/shell.module').then(m => m.ShellModule)
  }

案例模块也是如此

祝你好运！

Answer 2

第一个问题是您没有在任何地方布线或放置 shell 组件。你可以在 app.component.html 中将 router-outlet 替换为 <app-shell></app-shell>。如果您选择这样做，则需要从模块中导出 shell 组件。或者，您可以按照 Alejandro Camba 在另一个答案中描述的方式路由到 shell。

第二个问题是您没有将路由导入应用程序模块，因此即使您路由到 cases/current，也没有向路由器注册任何内容来加载当前案例组件。最佳做法是在 app-routing.module.ts

中延迟加载功能路由

const routes: Routes = [
  {
    path: 'cases',
    loadChildren: () => import('./cases/cases.module').then(m => m.CasesModule)
  },
  { path: '**', redirectTo: '', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: false })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

然后，您可以更新案例模块的路由以包含当前案例组件路由：

const routes: Routes = [
  { path: '', redirectTo: 'current', pathMatch: 'full' },
  {
    path: 'current',
    component: CurrentCasesComponent,
  },
];

之所以可行，是因为“cases”路由到 cases 模块，而“current”将路由到 CurrentCasesComponent。

Angular 10 个组件未加载到路由器插座中

Angular 10 components not loading in router-outlet

angular

angular-components

router-outlet