Summary: NgRx — Advanced Concepts

Working with 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 be loaded 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.

The common mistake developers make

The main goal of creating lazy-loaded modules is to entirely decouple the functionality of that module from the initially bundled code. Developers often import interfaces from the lazy-loaded modules into the eagerly loaded modules. As a result, the lazy-loaded module mistakenly gets compiled into the initially bundled code.