Angular lazy loading not working with ng build --prod

Viewed 29

We have an angular 10 application and the lazy loading is working in localhost

but when building with the command 'ng build --prod' the lazy loading modules are not generated.

Thoses are the routing modules :

App-routing.modules.ts

//Imports 
const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./front-office/front-office-routing.module').then(m => m.FrontOfficeRoutingModule)
  },
  { path: 'andex/back/login', component: LoginComponent },
  {
    path: 'andex/back',
    loadChildren: () => import('./back-office/back-office-routing.module').then(m => m.BackOfficeRoutingModule),
    canActivate: [AuthGuard]
  },
  { path: '**', redirectTo:'/NotFound' }   
];    
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Front-office-routing.module.ts

//Imports     
const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./entreprise/entreprise-routing.module')
      .then(m => m.EntrepriseRoutingModule)
  },
  {
    path: ':category',
    loadChildren: () => import('./entreprise/entreprise-routing.module')
      .then(m => m.EntrepriseRoutingModule)
  },
  {
    path: ':category/:page',
    loadChildren: () => import('./entreprise/entreprise-routing.module')
      .then(m => m.EntrepriseRoutingModule)
  },
];    
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class FrontOfficeRoutingModule { }

Back-office-routing.module.ts

//Imports  
const routes: Routes = [
  { path: '', component: DashboardComponent },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'vueensemble', component: VueensembleComponent },
  { path: 'modifutilisateur', component: ModifUtilisateurComponent },
  { path: 'modifpwd', component: ModifpwdComponent },
  { path: 'utilisateur', component: UtilisateurComponent },
  { path: 'parametres', component: ParametresComponent },
  {
    path: 'pages',
    loadChildren: () => import('./pages/pages-routing.module').then(m => m.PagesRoutingModule)
  },
  {
    path: 'articles',
    loadChildren: () => import('./articles/articles-routing.module').then(m => m.ArticlesRoutingModule)
  }
];    
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class BackOfficeRoutingModule { }

Thanks.

1 Answers

You should import in loadChildren the module

import('./front-office/front-office.module')

not the routing module

import('./front-office/front-office-routing.module')
Related