Working with Lazy-Loaded Modules
Explore the concept of lazy-loaded modules in Angular and how to apply them effectively with NgRx for better state management. Learn to identify common mistakes like improper imports that break lazy loading, and see how to fix code to maintain module boundaries. This lesson helps you improve initial load performance by keeping lazy modules isolated and bundled separately.
We'll cover the following...
Introduction to lazy-loaded modules
When an Angular application loads, all of its modules load as well. This is known as eager loading. This is the default behavior of all the Angular modules. However, if we specify a module as lazy-loaded, it will only load when the user requests it.
During compilation, each lazy-loaded module gets bundled independently. It helps keep the initial bundle sizes smaller, which in turn helps decrease load times.
In our application, we have defined the product module as a lazy-loaded ...