Angular Preloading Strategies

Angular modules are chunks of code that can be imported into various parts of your application. A module can contain grouped pieces of components, services and other functionality, each focused on a feature area, specific domain, workflow, etc.

And why are they cool?

They’re cool because Angular modules bring modular super-powers to web applications. And to the best of my knowledge, no other frontend framework or library does this as well as Angular does.

As your Angular application grows, the modules feature becomes more and more important. It allows you to split the various parts of your web application into pieces that can be loaded later.

Now, when the core of your Angular application is loaded into a browser these lazy-loaded modules will not load until requested. That means when a user clicks on a link that requires one of your lazy-loaded modules, they will have to wait until that module is downloaded and initialized.

This is where preloading strategies can help make your Angular application sparkle.

Built-in Angular preloading strategies.

Angular ships with two basic preloading strategies.

The NoPreloading strategy stamps its foot and says you may NOT preload any lazy-loaded modules.

The PreloadAllModules takes the exact opposite approach and loads all modules right away.

For small Angular applications, one of these two options might work. But my experience has been that as soon as an Angular application grows beyond anything small you’ll want a more strategic preloading strategy.

So what other options do we have?

Other Angular preloading strategies.

There are other preloading strategies that you can use, built by the community.

This package is a PreloadingStrategy that will preload a lazy-loaded route when the user hovers their mouse over a corresponding router link. It was built by Minko Gechev.