Preload lazy-loaded modules based on user roles

Tim Deschryver

To improve the user's experience Angular provides the option to lazy load modules. In short, this means that several parts (features) of the application will only be loaded when the user navigates to a feature that is lazy loaded.

Lazy loading benefits users because the initial application will load faster (less to download), but it also comes with a small cost. Because the code isn't loaded, it must be downloaded when the user navigates to that feature, which might take a couple of milliseconds or even seconds depending on the size of the feature and the users' bandwidth.

Depending on the type of the application, this behavior is not desired.

When you know that most of the lazy-loaded modules will be loaded eventually and when the bandwidth isn't a problem, it might be better to load all of the modules. For example, for business applications that are used in offices.

We can change this default implementation by using a different preloading strategy. Angular provides two built-in strategies:

To use a different strategy, set the preloadingStrategy config option while importing the Angular router module.

The two strategies have their pros and cons, but they are the entire opposite of each other. To offer the best experience, we must create a custom strategy. A strategy that uses lazy loading, to only load specific modules.

On the application that I'm currently working on, we've written a strategy that only loads the modules that the user has access to. You might think, at least we did, that using the PreloadAllModules strategy in combination with a canLoad guard results in the same result. But it does not. When a route has a canLoad guard, Angular skips this route, and thus the module won't be loaded.

To write a custom preloader, you must create a class that implements the PreloadingStrategy interface. The PreloadingStrategy interface has a preload method declaration that we must implement. The preload method is invoked with the to-be loaded route and a factory method load that you must invoke to load the route. When you don't invoke the load method, the lazy-loaded route won't load.

In the example below, we invoke a service to retrieve the users' roles. Depending on the roles, we decide if the lazy-loaded route must be loaded or not.

In the snippet above, we use the requiredRole from the route. To assign a role to a route, we must do so while declaring the route. To use the custom RoleBasedPreloader strategy, assign it to the preloadingStrategy config option.

Using this practice will make the application a tiny bit snappier. For applications that use the NgRx global store, it also has the additional benefit that you can preload feature modules with their state. This can be useful for when you want to share state between modules, without having to move the feature state to the root state.

Thanks to Juri Strumpflohner's, Angular Performance Series I discovered this technique.

Incoming links

Outgoing links

Feel free to update this blog post on GitHub, thanks in advance!

Join My Newsletter (WIP)

Join my weekly newsletter to receive my latest blog posts and bits, directly in your inbox.

Support me

I appreciate it if you would support me if have you enjoyed this post and found it useful, thank you in advance.

Buy Me a Coffee at PayPal logo

Share this post on

Twitter LinkedIn