Angular 8 Lazy Loading Syntax Not Working

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.

I came across this question when i was having similar issues like

module.ts is missing from the typescript compilation. please make sure it is in your tsconfig via the 'files' or 'include' property

and

error ts1323: dynamic import is only supported when '--module' flag is 'commonjs' or 'esnext

I got the first error when i tried using static lazy loading import

loadChildren: './lazy/lazy.module#LazyModule

i decided to use dynamic import

loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)

This threw the second error.

I then fixed it by simply adding "module": "esNext" to compilerOptions in tsconfig.json file and updated "module": "es2015" to "module": "esNext" in both tsconfig.app.json and tsconfig.tns.json files.

That solves the problem for me.