Angular Lazyload routes generates extra chunk files with prefix default~pages

Question

I'm trying to implement lazy loading routes for the project I'm currently working on. everything works and I get no errors, I can also see when I go to new pages new chunk files load.

however, in addition to my expected chunk files, cli also creates few extra files with prefix "default~pages", such as

default~pages-managers--managers-module~pages-hosts-hosts-module~pa~0e1f5bc0

and these files with default~ prefix load regardless of what page I'm landing on. For example, if I'm on the home page, I see both:

pages-home-home-module

and

default~pages-managers--managers-module~pages-hosts-hosts-module~pa~0e1f5bc0

does anyone know what are these default files are and how to get rid of them?

Answer 1

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 (Andre Elrico has already answered it), but I see a great benefit of keeping this default (i.e. bundle size(s) to load on the Network and build times). Below is a demonstration: -

With a common chunk: -

Without a common chunk: -

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.

Answer 2

Hope this helps:

I had the same issue that commonChunks with default~ .... where generated.

use in your angular.json (where you have "aot": true ... etc.):

"commonChunk": false