Does a shared module bloat your Angular app? Here's the solution!

Описание: Discover how shared modules affect your Angular application size and learn best practices for managing them with lazy loading.
---
This video is based on the question https://stackoverflow.com/q/62546580/ asked by the user 'YulePale' ( https://stackoverflow.com/u/9953550/ ) and on the answer https://stackoverflow.com/a/62547735/ provided by the user 'Plochie' ( https://stackoverflow.com/u/7203873/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Angular: Does a shared module bloat an app?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding Shared Modules in Angular

When building applications with Angular, developers often face the challenge of managing their application size and performance. One common question that arises is whether using a shared module can cause your app to bloat. For instance, if you're using Angular 8 and have a shared module with several components, you might wonder: Does Angular always import the entire shared module, or does it only import what’s necessary?

In this guide, we'll explore the implications of using shared modules and how to effectively manage them to keep your application lightweight.

The Problem with Shared Modules

In Angular, shared modules allow developers to consolidate and share common components, directives, and services across different parts of the application. It seems like a great way to maintain consistency and reduce redundancy, but it can raise a few concerns:

Bloating the Application: If an entire shared module is imported, even if only one or two components are needed, it might increase the size of your application unnecessarily.

Impact of Lazy Loading: If you are using lazy loading, which loads modules on demand, the way shared modules are structured can be crucial for keeping your bundles optimized.

Does Angular Import the Entire Shared Module?

Without Lazy Loading

If you're not using lazy loading in your Angular application, the build process will compile everything into a single chunk. This means that:

You will not see any advantage from having separate shared modules.

All components, even if they aren't required, will be included in the final build. Thus, your application could become unnecessarily large.

With Lazy Loading

On the other hand, when you implement lazy loading, Angular intelligently breaks your application into multiple chunks. This allows for more effective management of resources, but it introduces a challenge regarding shared modules:

If your shared module is imported across multiple lazy-loaded modules, it will include all the content from the shared module, regardless of whether it is used or not.

This potentially leads to bloating each lazy-loaded bundle with unnecessary components.

How to Overcome Module Bloating

To prevent your Angular application from bloating while utilizing shared modules with lazy loading, consider implementing the following best practices:

Create Multiple Shared Modules

Granularity is Key:

Divide your shared components and services into specific shared modules based on their functionality or usage.

For example, if you have components that are only used in specific features, group them accordingly.

Custom Imports:

Import only the shared modules that are required for each lazy-loaded module.

This ensures that only relevant components and services are included in a particular chunk, significantly reducing size.

Example

For instance, let’s say you have components categorized as follows:

Forms Module (for components related to forms)

Charts Module (for components related to charts)

Tables Module (for components related to displaying tables)

Instead of having one large SharedModule that includes all of these, create three separate modules:

FormsSharedModule

ChartsSharedModule

TablesSharedModule

Each lazy-loaded module can then import only the relevant shared module, ensuring that they receive only what they need.

Conclusion

Managing shared modules in Angular is not only about reusing code but also optimizing your application's performance. By understanding the implications of importing shared modules and leveraging lazy loading wisely, you can keep your Angular application efficient and responsive.

With careful planning and structuring of your shared components into more focused modules, you can preven