Angular 9 - lazy loading is not working in production build

Question

I am working on one of the application on Angular 9 and implemented the lazy loading for some module. configuration are below:

package.json:`"dependencies": { "@agm/core": "^1.1.0", "@angular/animations": "~9.1.0", "@angular/common": "~9.1.0", "@angular/compiler": "~9.1.0", "@angular/core": "~9.1.0", "@angular/forms": "~9.1.0", "@angular/platform-browser": "~9.1.0", "@angular/platform-browser-dynamic": "~9.1.0", "@angular/router": "~9.1.0",

"devDependencies": { "@angular-devkit/build-angular": "~0.901.0", "@angular/cli": "~9.1.0", "@angular/compiler-cli": "~9.1.0",`

Angular CLI: 9.1.5 NODE: 12.16.3

routing code is here:

const routes: Routes = [
  {
    path: '',
    component: LoginComponent
  },
  {
    path: 'dashboard',
    component: DashboardComponent
  },
  {
    path: 'resident',
    loadChildren: () => import('./modules/resident/resident.module').then(rm => rm.ResidentModule)
  },
  {
    path: 'supervisor',
    loadChildren: () => import('./modules/oclm-supervisor/oclm-supervisor.module').then(sup => sup.OclmSupervisorModule)
  },
  // otherwise redirect to login page
  { path: '**', redirectTo: '' }
];

child routing is here:

const routes: Routes = [
{
path: '',
children: [
{
path: '',
pathMatch: 'full',
redirectTo: 'bashboard'
},
{
path: 'bashboard',
component: DashboardComponent
}]
}]

This is working fine in local environment but when i am trying to build the project with --prod and publish the build on production. then routing is not working. for local: http://localhost:4200/resident (working) profuction: http://abxxxx.com/resident (not wokring)

@PhilippMeissner i am building my application using ng build --prod. after completion of build, there are no file generated related modules. while if i build using ng build, then i am able to see the module file in dist folder. if there any issue in production build in angular 9? — kashif azmi, May 15 '20 at 13:39

score 2 · Answer 1 · answered Dec 19 '20 at 18:46

Had the same problem because of setting commonjs as module in tsconfig.compilerOptions. Fixed by changing to esnext

Before:

{
    "compilerOptions": {
        "module": "commonjs"
        ...
    }
    ...
}

After:

{
    "compilerOptions": {
        "module": "esnext"
        ...
    }
    ...
}

Angular 9 - lazy loading is not working in production build

1 Answers1