angularmoduleangular-moduleshared-module

Angular: Does a shared module bloat an app?


I am using Angular 8. I have a shared module. Some modules just use one or two components from the shared module. Does Angular always import the whole shared module or does it only import the used components and drop the others via tree shaking?

Also if a group of different components use the same components/services/modules, is it better to have them have their own shared module or is one shared module for all okay?


Solution

  • As long as you are not using Lazy Loading, angular build will have only one chunk, it will contain everything. So there is no advantage in having separate Shared Modules in this scenario.

    Now, considering you are using Lazy Loading, after build, angular will create different chunks according to your Lazy loaded modules. Hence if you have shared module imported in every lazy loaded module, it will get bloated with everything (Required or not required in the particular module).

    To overcome this, create different different shared modules, and import only those are required. This will import only those modules which are required and reduce the chucks created for each Lazy loaded module.