DEV Community

Cover image for Angular Module Loading: Eager, Lazy and Preloading😇
Krishna Bhamare
Krishna Bhamare

Posted on • Edited on

9

Angular Module Loading: Eager, Lazy and Preloading😇

This Blog will walk through Angular module loading example. A module can be loaded eagerly, lazily and preloaded.
Eager loading is loading modules before application starts.
Lazy loading is loading modules on demand.
Preloading is loading modules in background just after application starts.
In lazy loading and preloading, modules are loaded asynchronously.
The application module i.e. AppModule is loaded eagerly before application starts. But the feature modules can be loaded either eagerly or lazily or preloaded.

Eager loading:

To load a feature module eagerly, we need to import it into application module using imports metadata of @NgModule decorator. Eager loading is useful in small size applications. In eager loading, all the feature modules will be loaded before the application starts. Hence the subsequent request to the application will be faster.

Checkout to know more about the Eager Loading Modules.

Lazy loading:

To load a feature module lazily, we need to load it using loadChildren property in route configuration and that feature module must not be imported in application module. Lazy loading is useful when the application size is growing. In lazy loading, feature module will be loaded on demand and hence application start will be faster.

Checkout to know more about the Lazy Loading Modules.

Preloading:

To preload a feature module, we need to load it using loadChildren property and configure preloadingStrategy property in RouterModule.forRoot. That feature module must not be imported in application module. When we assign Angular PreloadAllModules strategy to preloadingStrategy property, then all feature modules configured with loadChildren, are preloaded. To preload selective modules, we need to use custom preloading strategy. We should preload only those features which will be visited by users just after application start and rest feature modules can be loaded lazily. In this way we can improve the performance of our bigger size application.

Checkout to know more about the Pre-Loading Modules.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (1)

Collapse
 
oliverdjbrown profile image
Oliver Brown

Excellent articule thanks

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video