Tutorial

Preloading in Angular

Published on April 25, 2017
author

Alligator.io

Preloading in Angular

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Preloading modules in Angular is very similar to lazy loading, with the exception that the modules will be loaded immediately after all the eager loaded modules are ready. This eliminates the possible latency when navigating to a lazy loaded module, but still has the benefit of faster initial loading of the app because the initial module(s) get loaded first.

The following covers preloading modules for Angular 2+ apps.

PreloadAllModules

The default way of doing preloading is with a preloading strategy of PreloadAllModules, meaning that all lazy-loadable modules will be preloaded. It’s very easy to implement once you have lazy loading in place.

In your app module, import PreloadAllModules along with your other router imports:

app.module.ts
import { RouterModule, Routes, PreloadAllModules }
  from '@angular/router';

And now in your NgModule’s imports, specify the preloading strategy:

app.module.ts
imports: [
  ...
  RouterModule.forRoot(routes,
    { preloadingStrategy: PreloadAllModules })
],

And there you have it! All feature modules that are lazy loadable will now be preloaded.

Custom Preloading Strategy

If you don’t want all lazy loadable modules to be preloaded, you can implement your own preloading strategy. This can be useful when some routes will only be used rarely and don’t need to be preloaded at all.

We’ll define and export a CustomPreloading class that implements PreloadingStrategy:

custom-preloading.ts
import { Observable } from 'rxjs/Observable';
import { PreloadingStrategy, Route } from '@angular/router';


To implement our class we define a preload method that takes in the route information and a function to call if the module should be preloaded. The method itself should return an observable, hence why we return Observable.of(null) when a module shouldn’t be preloaded.


Now in our app module, we import our preloading strategy class, provide it, and tell RouterModule.forRoot about it:

app.module.ts
// ...
import { routes } from './routes';
import { CustomPreloading } from './custom-preloading';


Routes

Our routes can be setup with something similar to this, providing a data object with preload: true for modules that should be preloaded:

routes.ts
import { DashboardComponent } from './dashboard/dashboard.component';

import { Routes } from '@angular/router';

As with lazy loading, you can head over to your DevTools’ network tab to verify that the chunks get loaded and that preloading is working.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products


About the authors
Default avatar
Alligator.io

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel