CODEWITHSUNDEEP
angularangular9angular-lazyloading
kashif azmi
kashif azmi

Reputation: 67

Angular 9 - lazy loading is not working in production build

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)

Upvotes: 4

Views: 2588

Answers (1)

German Arutyunov
German Arutyunov

Reputation: 21

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"
        ...
    }
    ...
}

Upvotes: 2

Related Questions