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

Answer 1

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.

Answer 2

Though the answer has been accepted, I even faced a similar issue and it was due to not adding a routing module to the lazyloaded module. Any module that is being loaded lazily must have their own routing module otherwise the app redirects to the default route. I know this is pretty basic but sometimes we tend to ignore this fact.

Answer 3

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.

Answer 4

Issue for me was in the tsconfig.json. Once I updated the property "module" to "esnext", it worked fine.