This is how it works.

First, we load the initial bundle, which contains only the components we have to have to bootstrap our application. So it is as fast as it can be.

Then, we bootstrap the application using this small bundle.

At this point the application is running, so the user can start interacting with it. While she is doing it, we, in the background, preload other modules.

Finally, when she clicks on a link going to a lazy-loadable module, the navigation is instant.

We got the best of both worlds: the initial load time is as small as it can ben, and subsequent navigations are instant.

Enabling Preloading

To enable preloading we need to pass a preloading strategy into forRoot.

The latest version of the router ships with two strategies: preload nothing and preload all modules, but you can provide you own. And it is actually a lot simpler that it may seem.

Custom Preloading Strategy

Say we don’t want to preload all the modules. Rather, we would like to say explicitly, in the router configuration, what should be preloaded.

We start with creating a custom preloading strategy.

The preload method takes two parameters: a route and the function that actually does the preloading. In it we check if the preload property is set to true. And if it is, we call the load function.

Finally, we need to enable the strategy by listing it as a provider and passing it to RouterModule.forRoot.

Learn More

If you want to learn more about the Angular router, check out the book I’ve been writing on the subject: https://leanpub.com/router.