Angular Router: Preloading Modules
Victor Savkin is a co-founder of nrwl.io, providing Angular consulting to enterprise teams. He was previously on the Angular core team at Google, and built the dependency injection, change detection, forms, and router modules.
Lazy loading speeds up our application load time by splitting it into multiple bundles, and loading them on demand. We designed the router to make lazy loading transparent, so you can opt in and opt out of lazy loading with ease.
The issue with lazy loading, of course, is that when the user navigates to the lazy-loadable section of the application, the router will have to fetch the required modules from the server, which can take time.
To fix this problem we have added support for preloading. Now the router can preload lazy-loadable modules in the background while the user is interacting with our application.
This article is based on the Angular Router book, which you can find here https://leanpub.com/router. The book goes beyond a how-to-get-started guide and talks about the router in depth. The mental model, design constraints, and the subtleties of the API-everything is covered. If you enjoy the article, check out the book!
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.
Victor Savkin is a co-founder of Nrwl. We help companies develop like Google since 2016. We provide consulting, engineering and tools.
If you liked this, click the 👏 below so other people will see this here on Medium. Follow @victorsavkin to read more about monorepos, Nx, Angular, and React.
