Angular Preloading Strategies - What are they? And how are they used?

Want a savvy understanding about lazy-loaded modules and preloading strategies?

Here's the complete guide that will teach you everything you need to know about Angular's preloading strategies.

What are Angular preloading strategies?

Angular has this hunky-dory-whiz-bang-cool feature called the Angular module.

But what is it?

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.

A preloading strategy instructs Angular how to load your lazy modules.

Do you want to load them right away?

Or when the user needs them?

Or how about waiting until a user hovers over a lazy-loaded module that hasn't been loaded yet?

I mean, hey buddy, you're the boss and you get to call the shots in this lazy loading stuff.

Built-in Angular preloading strategies.

Angular ships with two basic preloading strategies.

• NoPreloading
• PreloadAllModules

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.

1. ngx-hover-preload.

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.

And wha-da-ya-know? He happens to be part of the Angular team.

To install the ngx-hover-preload package run this command.

yarn add ngx-hover-preload

Or if you use npm.

npm install --save ngx-hover-preload

Import the HoverPreloadModule in your AppModule and your lazy-loaded modules to ensure the required directives are available:

import { HoverPreloadModule } from 'ngx-hover-preload';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    // ...
    HoverPreloadModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Next, you'll import the HoverPreloadModule into all lazy-loaded modules.

And finally, set the HoverPreloadStrategy as your preloadStrategy:

import { HoverPreloadStrategy } from 'ngx-hover-preload';

@NgModule({
  // ...
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: HoverPreloadStrategy })],
})
export class AppModule {} 

2. ngx-quicklink.

This package is another Preloading strategy built by the same genius. It provides a preloading strategy which automatically downloads the lazy-loaded modules associated with all the visible links on the screen.

It's an attempt to make subsequent page navigation much faster. Here's how it ticks.

• First, it detects the routerLinks within the viewport.
• Second, waits until the browser is idle and page completely loaded and rendered.
• Third, make sure that the user isn't on a slow connection or has data-saver enabled.
• Finally, it prefetches the lazy loaded modules using Angular's prefetching strategy.

Here's how to install and use it in your Angular application.

npm install --save ngx-quicklink

After that import the QuicklinkModule to the AppModule, and use the QuicklinkStrategy as preloadingStrategy in the router's configuration. Like so.

// ...
import { QuicklinkModule, QuicklinkStrategy } from 'ngx-quicklink';

@NgModule({
  declarations: [...],
  imports: [
    // ...
    QuicklinkModule,
    RouterModule.forRoot(routes, { preloadingStrategy: QuicklinkStrategy }),
  ],
  bootstrap: [...]
})
export class AppModule {}

And last of all, you'll import the HoverPreloadModule into all lazy-loaded modules.

What type of strategy should you use for your Angular application?

That, my friend, is a decision that's unique to every Angular application. You'll have to analyze your scenario and decide what strategy is best for your users.

If the users are employees on a commercial, fiber-optic connection then use a preload-all strategy. Juz grab those files and jam them down!

But if your Angular application has mobile users on flaky connections than a conservative approach is my recommendation.

Conclusion

In this article we've looked at various preloading strategies that you can use in your Angular application.

Questions? Comments? Anything I overlooked? Don't hesitate to ping me.

Angular Expert & Consultant