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.