4

I recently upgraded a project to Angular 8, I've tried switching the loadChildren imports to the new syntax

For example from:

loadChildren: './maintenance/maintenance.module#MaintenanceModule',

To:

loadChildren:() => import('./maintenance/maintenance.module').then(m => m.MaintenanceModule),

The app-routing is created like so:

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes, {
      scrollPositionRestoration: 'enabled',
      enableTracing: false,
    }),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule { }

However upon building the project no modules seem to be lazy loaded. Using Webpack bundle analyser I can see all the routed modules are included in the main bundle, and also no network activity is occurring when navigating to these routes.

Does anybody know what I'm missing here?

Jack
  • 131
  • 2
  • 5
  • Strange! Are you running it on local or do you have a StackBlitz created for this? – SiddAjmera Jun 05 '19 at 09:28
  • This is running locally, I'll try create a stripped down version of my setup for Stackblitz, to see if it gets replicated. – Jack Jun 05 '19 at 09:55

1 Answers1

8

Finally worked this out, I needed to upgrade my target/module config in the root level tsconfig.json.

I changed: 

"target": "es5",
"module": "commonjs",

To:

"target": "es2015",
"module": "esnext",

Lazy loading now works

Jack
  • 131
  • 2
  • 5
  • Angular CLI: 8.3.17 Node: 11.15.0 OS: linux x64 I have above configuration and tsconfig is set to same as mentioned Still lazy loading is not working – Kishore Chilakala Dec 19 '19 at 15:00