Angular 8 Lazy Loading Syntax Not Working

Question

I'm trying to implement Lazy loading into my Angular 8 application but when I use the syntax provided in the official doc, my module gets loaded eagerly.

When I use the syntax that comes with angular 8:

const routes: Routes = [{
  path: 'lazy',
  // The new import() syntax
  loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
}];

I get no error but I don't get a new chunk when I build the app, and when navigationg to the module route, nothing appears in the Network tab of chrome. (Although I can navigate to the module just fine)

But if I rewrite it to:

const routes: Routes = [{
  path: 'lazy',
  // The following string syntax for loadChildren is deprecated
  loadChildren: './lazy/lazy.module#LazyModule'
}];

(which is the old syntax) it works fine.

The module in question is definitely not imported anywhere else, the difference in result comes only from changing the syntax.

I'd like to know if there is something I'm missing there. I'm thinking maybe it's my Angular that isn't correctly set up to version 8 (or some other package) So here's what I have with a ng version:

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.4
@angular-devkit/build-angular     0.800.4
@angular-devkit/build-optimizer   0.800.4
@angular-devkit/build-webpack     0.800.4
@angular-devkit/core              8.0.4
@angular-devkit/schematics        8.0.4
@angular/cdk                      8.0.0
@angular/cli                      8.0.4
@angular/material                 8.0.0
@ngtools/webpack                  8.0.4
@schematics/angular               8.0.4
@schematics/update                0.800.4
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.30.0

I did try to create a new sample project and managed to get it to work there, but from what I can see, both projects have the same version of everything.

Any idea what could cause the new syntax not to work?

Answer 1

After a lot of digging between trying to provide a minimal reproducible example, trying to update all my packages or reinstalling them, and simply digging through all my files and try to find what was wrong, I managed to fix the issue.

I essentially re-upgraded my app to angular 8 as if I was using angular 7 (even tho I was supposedly already using angular 8) using the commands ng update @angular/cli --from 7 --to 8 --migrate-only ng update @angular/core --from 7 --to 8 --migrate-only as mentionned in this thread

This updated all the old syntax of lazy loading to the new one automatically and on building/serving I could finally see all the chunks for each module

Given that it was fixed with these commands, I believe the issue was with packages/dependencies somewhere.