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

Question

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.

Answer 1

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.