Angular 6 - Lazy loading mutiple levels of childs

Question

Today I have the following scenario My application will be very large, so I would like all child modules of children's children to be loaded lazy load, in the codes I posted below does not generate error in Angular 6, but the module before the next child module is always being referenced circular.

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 { }

and finally

complemento-routing.module.ts

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

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

1 What is the correct way to do this?

and my application will be very large, so I would like all child modules of the children's children to be loaded lazy load, in the codes I posted below does not generate error in Angular 6, but the module before the next child module is always being referenced from circular shape. Is it possible to create this structure below ?

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

UPDATE 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' 
    },
    ...
];

Folder +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 { }

Folder +grupo-acesso inside +seguranca

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

It is OK, this structure is possible, you can make any module is lazy-load if you want.

But it has some attention:

• When you redirect to any component, all of its parents will be loaded before, and then it will be loaded and rendered.
• If your application very large, you can implement preloading for a module which has a lot of children (determine which is high priority children for preloading). It will improve the UX and loading time. Refer here: https://coryrylan.com/blog/custom-preloading-and-lazy-loading-strategies-with-angular
• For a large app, we should modular all of the things from the beginning. And later will more easy to maintain or scale.

---

Hope it useful for you.