Question

今天我有以下情况我的应用程序将非常大，因此我希望所有孩子的孩子的子模块都被延迟加载，在下面发布的代码中，Angular 6中不会产生错误，但是下一个子模块之前的模块始终被循环引用

app-routing.module.ts

const routes: Routes = [
  { path: '', component: LayoutBlankComponent, loadChildren: './+login/login.module#LoginModule' },

];

// *******************************************************************************
//

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

login.routing.ts

@NgModule({
  imports: [RouterModule.forChild([
    {
      path: 'login', component: LoginComponent,
      children: [
        {
          path: 'complemento', loadChildren: './+complemento/complemento-login.module#ComplementoLoginModule'
        },
      ]
    },
  ])],
  exports: [RouterModule]
})
export class LoginRoutingModule { }

最后

complemento-routing.module.ts

const routes: Routes = [{
  path: '',
  component: ComplementoComponent
}];

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

1正确的方法是什么？

，我的应用程序将非常大，因此我希望延迟加载子级子级的所有子级模块，在下面发布的代码中，在Angular 6中不会产生错误，但是在下一个子级模块之前的模块总是从圆形引用。是否可以在下面创建此结构？

AppComponent
    |
    |
    |------ (+) Main Module
                    |
                    |
                    |---------(+) Feature Module 1

                                        |
                                        |
                                        |----------(+)Child Feature Module 1
                                                                |
                                                                |
                                                                |----------(+)Child of Child of Feature Module 1
                                        |
                                        |
                                        |----------(+)Child Feature Component 2
                                        |
                                        |
                                        |----------(+)Child Feature Component 3

更新16/05/2019

app.module.ts

imports: [ ... AppRoutingModule, .. ]

app-routing.module.ts

const routes: Routes = [ 
    {
        path: '', pathMatch: 'full', redirectTo: 'home'
    }, 
    ... 
    { 
        path: 'seguranca', component: Layout2Component,loadChildren: 
              './+seguranca/seguranca.module#SegurancaModule' 
    },
    { path: 'diversos', component:   
            Layout2Component,
            loadChildren:'./+diversos/diversos.module#DiversosModule' 
    },
    { path: 'operacional', component: Layout2Component,
            loadChildren:'./+operacional/operacional.module#OperacionalModule' 
    },
    ...
];

文件夹 + seguranca

seguranca.module.ts

@NgModule({
  imports: [
    CommonModule,
    SegurancaRoutingModule,
   ...
  ],
  declarations: [],
  exports: []
  })
  export class SegurancaModule { }

seguranca-routing.module.ts

...
@NgModule({
          imports: [RouterModule.forChild([
    {
      path: '', pathMatch: 'full', redirectTo: 'grupoacesso'
    },
    {
      path: 'grupoacesso',
      canActivate: [SecurityGuard],
      canLoad: [SecurityGuard],
      data: {
        claimType: 'enuGrupoAcessoPermissoes',
      },
      loadChildren: './+grupo-acesso/grupo-acesso.module#GrupoAcessoModule'
    },
    {
      path: 'usuario',
      canActivate: [SecurityGuard],
      canLoad: [SecurityGuard],
      data: {
        claimType: 'enuUsuarioPermissoes'
      },
      loadChildren: './+usuario/usuario.module#UsuarioModule'
    }
  ])],
  exports: [RouterModule]
})
export class SegurancaRoutingModule { }

+ seguranca

中的文件夹 + grupo-acesso

grupo-acesso.module.ts

@NgModule({
  imports: [
    CommonModule,
    GrupoAcessoRoutingModule,
    ...
  ],
  providers: [
    GrupoAcessoService,
  ],
  declarations: [
    GrupoAcessoListComponent,
    GrupoAcessoEditComponent
  ]
})
export class GrupoAcessoModule { }

grupo-acesso-routing.module.ts

const routes: Routes = [
  {
    path: '', pathMatch: 'full', redirectTo: 'list'
  },
  {
    path: 'list',
    component: GrupoAcessoListComponent,
    data: {
      pageTitle: 'Grupos de Acesso',
    }
  },
  {
    path: 'cadastro/' + enuOperacao.Editar + '/:id',
    component: GrupoAcessoEditComponent,
    canActivate: [SecurityGuard],
    canLoad: [SecurityGuard],
    data: {
      pageTitle: 'Grupos de Acesso',
      claimType: enuGrupoAcessoPermissoes.GRA_ALTERAR,
      operacao: enuOperacao.Editar
    },
  },
  {
    path: 'cadastro/' + enuOperacao.Exibir + '/:id',
    component: GrupoAcessoEditComponent,
    canActivate: [SecurityGuard],
    canLoad: [SecurityGuard],
    data: {
      pageTitle: 'Grupos de Acesso',
      claimType: enuGrupoAcessoPermissoes.GRA_EXIBIR,
      operacao: enuOperacao.Exibir
    },
  },
  {
    path: 'cadastro/' + enuOperacao.Inserir,
    component: GrupoAcessoEditComponent,
    canActivate: [SecurityGuard],
    canLoad: [SecurityGuard],
    data: {
      pageTitle: 'Grupos de Acesso',
      claimType: enuGrupoAcessoPermissoes.GRA_INCLUIR,
      operacao: enuOperacao.Inserir
    },
  }
];

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

Answer 1

可以，这种结构是可能的，如果需要，您可以使任何模块为延迟加载。

但是它有一些注意事项：

当您重定向到任何组件时，将先加载其所有父级，然后再加载并呈现它。
如果您的应用程序很大，则可以为具有许多子代的模块（确定要预加载的preloading个子代）实现high priority。它将改善用户体验和加载时间。请参阅此处：https://coryrylan.com/blog/custom-preloading-and-lazy-loading-strategies-with-angular
对于大型应用程序，我们应该从一开始就对所有事物进行模块化。以后将更易于维护或扩展。

希望它对您有用。

Angular 6-儿童的延迟加载多级

1 个答案: