具有延迟加载和子路由设置的 Angular答案

【问题标题】：Angular with lazy loading and child routes setup具有延迟加载和子路由设置的 Angular
【发布时间】：2020-03-31 06:36:36
【问题描述】：

我正在尝试使用延迟加载来设置 Angular (8)，但我就是不知道如何使它工作。

我有 3 个模块，每个模块都有不同的子路线：

module1（在我的应用程序内部）
- /家
- /home/path1
- /home/path2
module2（应用程序的展示，公开）
- 索引
- 演示文稿
- 功能...
module3（与访问相关的一切）
- 登录
- 注册

任何人都会有一个关于如何正确实现此功能的工作示例？

谢谢

EDIT = 这是我的主模块的路由代码：

{ 路径：'home'，组件：HomeComponent，canActivate： [AuthGuardService]，孩子们： [ { 路径：''，组件：仪表板组件，canActivate：[AuthGuardService] }， { 路径：'升级'，组件：StripeFormComponent，canActivate：[AuthGuardService] } ] }, ];

我尝试在 app-routing.module.ts 中添加延迟加载。我重新加载了我的应用程序，看起来代码少了一点，而且我的模块看起来像是懒惰地加载了但是当我尝试访问该页面时，我得到了一个没有任何解释的空白页面。所以我迷路了。

【问题讨论】：

到目前为止你尝试过什么？你能添加你的代码吗？
我只是添加了更多细节

标签： angular angular-ui-router

【解决方案1】：

一种方法是您可以为每个模块中的组件确定一些通用路径名（例如您如何为模块 1 设置“home”）。那么

  `const routes: Routes = [
   { path: 'home', loadChildren: () => import('./core/core.module').then(m => m.CoreModule) }
   { path: 'module2', loadChildren: () => import('<path to module>').then(m => m.module2) }
   { path: 'module3', loadChildren: () => import('<path to module>').then(m => m.module3) }
 ];`

然后在每个模块中，您同样可以为每个组件定义路径

`const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'asset/:id', component: AssetComponent },
  { path: 'sub/:id', component: SubCategoryComponent },
];`

这样，只有包含与路径匹配的组件的模块才会被加载。

【讨论】：

是的，它奏效了。我错过了这部分：{路径：''，redirectTo：'home'，pathMatch：'full'}。非常感谢！！！
请仔细检查此帖子：vsavkin.tumblr.com/post/146722301646/…，因为您会遇到该配置的一些问题

【解决方案2】：

要在 Angular 8 的延迟加载中设置路由，你必须为你想要去的组件定义一个模块，你必须在其中定义一个 routing.module：

 @NgModule({
      declarations: [
        DetailComponent,
      ],
      imports: [
        DetailRoutingModule,
        ChartsModule,
        CommonModule
      ]
    })

export class DetailModule { }

而 YorComponentDetailRoutingModule 是

const routes: Routes = [{
  path: '',
  component: DetailComponent,

}];

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


export class DetailRoutingModule { }

In app.routing module you can write:

const routes: Routes = [{
  path: '',
  component: PagesComponent,
  children: [
    {
      path: 'home',
      component: HomeComponent
    },{
      path: 'home/detail',
      loadChildren: () => import('./detail/detail.module')
      .then(m => m.DetailModule),
    } ...

【讨论】：