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.