Working with Lazy-Loaded Modules

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 module. We can verify whether the product module is lazily loaded or not with Chrome DevTools. Click the “Run” button below to launch the application and visit the home page.