Search code examples
angularwebpackangular-lazyloading

Angular lazy loading not working in webpack with @ngtools/webpack

Lazy module is eagerly loading, No separate chunks created for lazy modules

I created a repo to reproduce the issue

1.Clone https://github.com/sameerthekhans/lazy-load-angular-webpack-temp.git

2.npm i

3.npm start

4.Output - No chunk files created in dist and the module is eagerly loaded in the browser

Additional Info
I used all the latest version of dependencies Angular - 11.1.1, Webpack - 5 and So on...
*Also note I didn't used angular-router-loader as @ngtools/webpack is used.

Solution

  • The main issue is that in your tsconfig you define module: "commonjs". commonjs doesn't respect dynamic import syntax. You need to change it to module: "ESNext" for example that does.