Angular 8 lazy loaded modules in new loadChildren import syntax not being lazily loaded

user_6941560 0
Viewed 4693

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?

angular8 angular
1 Answers

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

user_69415600
Related