Route preloading strategies in Angular https://web.

dev/route-preloading-in-angular/

About Blog Learn Explore Pa�erns Case studies

SHARE

Route preloading strategies in Angular SUBSCRIBE

1 of 12 30/01/23, 15:26
Route preloading strategies in Angular https://web.dev/route-preloading-in-angular/

Available in: English, Español, and Português

Appears in: Angular

Minko Gechev
Twitter GitHub Glitch Homepage

On this page

Route-level code splitting can help you reduce the initial load time of an application by
delaying the JavaScript associated with routes that aren't initially needed. This way, the
Angular router waits until a user navigates to a given route before triggering a network
request to download the associated JavaScript.

While this technique is great for initial page load, it can slow down navigation,
depending on the users' network latency and bandwidth. One way to tackle this
problem is route preloading. Using preloading, when the user is at a given route, you SHARE

SUBSCRIBE

2 of 12 30/01/23, 15:26
Route preloading strategies in Angular https://web.dev/route-preloading-in-angular/

Route preloading strategies in Angular

The Angular router provides a configuration property called preloadingStrategy ,
which defines the logic for preloading and processing lazy-loaded Angular modules.
We'll cover two possible strategies:

PreloadAllModules , which preloads all lazy-loaded routes, as the name implies

QuicklinkStrategy , which preloads only the routes associated with links on the
current page.

The rest of this post refers to a sample Angular app. You can find the source code on
GitHub.

Using the PreloadAllModules strategy

SHARE

SUBSCRIBE

3 of 12 30/01/23, 15:26
Route preloading strategies in Angular https://web.dev/route-preloading-in-angular/

// …

Now serve the application and look at the Network panel in Chrome DevTools:

1 Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.

2 Click the Network tab.

You should see that the router downloaded nyan-nyan-module.js and about-
about-module.js in the background when you opened the application:

SHARE

SUBSCRIBE

4 of 12 30/01/23, 15:26
Route preloading strategies in Angular https://web.dev/route-preloading-in-angular/

0:00 / 0:07

The PreloadAllModules strategy in action.

The router also registered the modules' route declarations so that when you navigate
to a URL associated with any of the preloaded modules, the transition is instantaneous.

SHARE

SUBSCRIBE

5 of 12 30/01/23, 15:26
Route preloading strategies in Angular https://web.dev/route-preloading-in-angular/

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

…

@NgModule({

SHARE

SUBSCRIBE

6 of 12 30/01/23, 15:26
Route preloading strategies in Angular https://web.dev/route-preloading-in-angular/

SHARE

SUBSCRIBE

7 of 12 30/01/23, 15:26
Route preloading strategies in Angular https://web.dev/route-preloading-in-angular/

SHARE

SUBSCRIBE

8 of 12 30/01/23, 15:26
Route preloading strategies in Angular https://web.dev/route-preloading-in-angular/

SHARE

SUBSCRIBE

9 of 12 30/01/23, 15:26
Route preloading strategies in Angular https://web.dev/route-preloading-in-angular/

SHARE

SUBSCRIBE

10 of 12 30/01/23, 15:26
Route preloading strategies in Angular https://web.dev/route-preloading-in-angular/

SHARE

SUBSCRIBE

11 of 12 30/01/23, 15:26
Route preloading strategies in Angular https://web.dev/route-preloading-in-angular/

SHARE

SUBSCRIBE

12 of 12 30/01/23, 15:26