8

I have implemented lazy-loading in my Angular Application (using CLI 7.3.4)

Its compiling successfully but when I route to a lazy-loaded module (say module1 path), its loading one more chunk which is actually other lazy loaded module (Module2) path.

Chunk Name: "../default~lazy-load-modules-module1-module1-module~lazy-load-modules-module2-mo~be6d77c5.js"

I am unable to understand why this default ~ is getting generated.

I am expecting to load modules only when one of its component is invoked.

Akhil
  • 1,403
  • 7
  • 19
  • where is your code? – Reactive_learner May 13 '19 at 07:42
  • please share some code I think you are missing something here. – Mohammadreza Imani May 13 '19 at 07:48
  • Hello, I appreciate your response. I am trying to create a stackblitz as I cant share my code. But unfortunately, I couldn't. I found a duplicate of my question which is however not yet answered. Please help me answering this [question](https://stackoverflow.com/questions/55944294/angular-lazyload-routes-generates-extra-chunk-files-with-prefix-defaultpages). It would help me. Regards, Akhil – Akhil May 13 '19 at 09:03
  • Hello, I have tried doing prod build with namedChunks: true. js files generated after prod build : default~lazy-load-modules-module1-module1-module-ngfactory~lazy-load-modules-module2~f905bd40.e57cb63c897b03f07599.js default~lazy-load-modules-module2-module2-module-ngfactory~lazy-load-modules-m~e4585478.7b99f3d4bf5e27b58bfd.js and 3 seperate js files for 3 seperate modules. PS: I have having a shared module which is getting imported only in 2 modules out of 3, is this the reason for getting default ~ generated – Akhil May 13 '19 at 11:30

2 Answers2

6

Its just means the generated chunk belongs to both module1 and module2.

I believe you had an shared module. If yes, then this is chunk of that module.

Please let me know if you want further information.

Jeff booz
  • 76
  • 1
  • 4
4

This comment is w.r.t. Angular version 11.2.1...

This is a default feature (set to true) that could be configured in angular.json file (commonChunk: false, add this property below the aot key). Also, I see a great benefit of keeping the default value (improving bundle size(s) to load on the Network and build times). Below is a demonstration: -

With a common chunk: - enter image description here

Without a common chunk: - enter image description here

Outro: I can say- with the 2nd approach, common modules will get merged with each individual lazy-loaded module. If that is what you are looking for; then tweak the settings in angular.json file.

Please Note: The build time is dependant on the Operating System, Hardware Config, etc.

Santhosh John
  • 648
  • 5
  • 14