Angular 带有延迟加载问题的嵌套路由

Question

我有一个应用程序，我只需要在启动时提供登录功能，所有剩余的代码都应该在用户验证后延迟加载。

我创建了一个 core.module 和一个 core-routing.module 和一个 core.component 来处理这个问题，但是 child 组件（例如 DashboardComponent）在 app.component.html 上的 router-outlet 元素内呈现，而不是 [=54] =].html 所以 header 没有显示。

我已经搜索了很多，但找不到如何让它工作。

app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: 'signin', pathMatch: 'full' },
  { path: 'signin', component: SigninComponent },
  { path: 'app', loadChildren: './core/core.module#CoreModule', canLoad: [AuthGuard] },
  { path: '**', redirectTo: 'signin' }
];

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

app.component.html

<router-outlet></router-outlet>

core-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule', canLoad: [AuthGuard] },
  { path: '**', redirectTo: 'dashboard' }
];

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

core.component.html

<div id="header">
  <app-header></app-header>
</div>
<main id="content">
  <router-outlet></router-outlet>
</main>

dashboard-routing.module.ts

const dashboardRoutes: Routes = [
  { path: '',  component: DashboardComponent, pathMatch: 'full' }
];

@NgModule({
imports: [
  CommonModule,
  MaterialModule,
  SharedModule,
  RouterModule.forChild(dashboardRoutes)
],

Answer 1

这是因为您使用了2个路由器插座。所以你必须命名路由器来渲染组件以更正一个

<router-outlet name="secondRouterOutlet"></router-outlet>

{path: '/examplePath', component: secondComponentComponent, outlet: 'secondRouterOutlet'}

这 Whosebug answer 可能会有帮助

Answer 2

在尝试了许多不同的方法之后，对我有用的是将 core-routing.module.ts 更改为单一路由，并将延迟加载的模块作为子模块包含在其中：

const routes: Routes = [
  {
    path: '',
    component: CoreComponent,
    children: [
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      { path: 'dashboard', loadChildren: '../dashboard/dashboard.module#DashboardModule', canLoad: [AuthGuard] },
      { path: 'customers', loadChildren: '../customers/customers.module#CustomersModule', canLoad: [AuthGuard] },
      { path: 'history', loadChildren: '../history/history.module#HistoryModule', canLoad: [AuthGuard] },
      { path: 'processing', loadChildren: '../processing/processing.module#ProcessingModule', canLoad: [AuthGuard] },
      { path: '**', redirectTo: 'dashboard' }
    ]
  }
];

希望这对尝试实现相同功能的人有所帮助。

Answer 3

好吧，我参加聚会迟到了，但过去 5 天我一直在解决同样的问题。在这里发帖以防有帮助。

序言，不要将每个@Asanka 响应的命名网点与嵌套网点混淆。我通过堆栈溢出的第一次阅读我没有意识到其中的区别，所以错误地尝试命名插座并理解如何路由到它们。

我通过浏览这篇优秀文章找到了答案（我不是作者也不是他们的附属机构）：

https://medium.com/@shairez/angular-routing-a-better-pattern-for-large-scale-apps-f2890c952a18

特别感兴趣的是链接的 Stackblitz 项目（参见 choose-address-routing.module.ts 第 9 行显示第二层延迟加载模块路由 需要完全限定的路由 ）。

我也抽空把这篇文章的每一行（整帖）都看完了，来理清我的理解：

https://blog.angularindepth.com/the-three-pillars-of-angular-routing-angular-router-series-introduction-fb34e4e8758e

解决我的错误的复杂性来自 2 个问题：

我在我的应用程序的另一部分引用了我的延迟加载模块。最低级别的延迟加载模块有一个路由“”重定向。因为它已经加载，重定向在路由树的根级别被捕获，设置最顶层路由器出口的内容（在您的示例中 app.component.html 中的出口）而不是嵌套出口（您的 core.component.html).看起来它可以正常工作，但在针对正确的插座时出现问题，但不，不是这样！
第二个是我的最低级别的延迟加载路由器模块没有使用完全合格的路由，然后当我解决第 1 点时，我得到一个空的嵌套出口但没有错误让我知道不存在路由.

根据我的解决方案，您的仪表板-routing.module.ts 看起来像：

const dashboardRoutes: Routes = [
  { path: '',  , pathMatch: 'full', redirectTo: 'dashboard/child-view' },
  { path: 'dashboard/child-view',  component: DashboardComponent, pathMatch: 'full' }
];

参见上面的“dashboard/child-view”！这就是我所说的 完全合格路由 到二级路由器出口（由二级延迟加载模块填充）的意思。

我想要我的 5 天回来！我会接受设拉子。很想知道这是否对您有帮助！

Angular 带有延迟加载问题的嵌套路由

Angular nested routing with lazy loading issue

angular

angular-router