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 blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (1)

Collapse
 
oliverdjbrown profile image
Oliver Brown

Excellent articule thanks

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

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay