Why does lazy loading angular modules create extra chunk default~customer-customer-module~order-order-module?

Question

My app contains 5 modules- CoreModule, SharedModule, UserModule, CustomerModule and OrderModule. UserModule, CustomerModule and OrderModule are lazy loaded modules.

When I ng server the app, it was supposed to generate 3 chunks - user-user-module, customer-customer-module and order-order-module.

But it is creating another extra chunk default~customer-customer-module~order-order-module along with those three chunks.

Now run the app in localhost, open Network tab of Developer tools:

1. navigate to UserModule, user-user-module.js is loaded.
2. navigate to CustomerModule, default~customer-customer-module~order-order-module.js and customer-customer-module.js are loaded.

My queries are:

1. Why is Angular CLI creating that extra chunk default~customer-customer-module~order-order-module ?
2. When navigate to UserModule, only user-user-module.js is loaded. But why default~customer-customer-module~order-order-module.js and customer-customer-module.js are being loaded when navigate to CustomerModule ?

I need to know what may be the causes. I cannot share my source code. Please give your opinionated answer.

Angular version: 7.3.9.

Answer 1

This is a feature of webpack known as split-chunks

It generated a shared bundle of dependencies that are used both in your customer module and order module.