-1

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.

Sameer
  • 4,758
  • 3
  • 20
  • 41

1 Answers1

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.

Raz Ronen
  • 2,418
  • 2
  • 14
  • 26
  • I also turned on `"moduleResolution": "node"` and changed your webpack typescript to js syntax in order for it to work, but this isn't the main reason for webpack not splitting your code – Raz Ronen Feb 04 '21 at 10:30
  • Thanks! it worked with above changes, but how do I use import statements?(I would like to use typescript for webpack config) – Sameer Feb 04 '21 at 11:37
  • webpack is written in javascript so I don't think you actually can, unless you set up a grunt/gulp task to first compile your typescript which is overhead in my opinion – Raz Ronen Feb 04 '21 at 11:40
  • 1
    I think its possible [webpack config as TS](https://webpack.js.org/configuration/configuration-languages/#typescript). Only thing is I need to create separate tsconfig for webpack (let me give it a try) Thanks. – Sameer Feb 04 '21 at 11:47