Angular | custom preloading strategy

In my previous post I talked about three angular module loading types which are eager loading, lazy loading and preloading strategy. if you haven’t read it already you can find it in this link. Today I will talk about preloading strategy and how to write your own preloading strategy.

What is preloading?

Preloading is similar to lazy-loading. In lazy-loading, modules are loaded on demand from the user. but what happens in preloading is all the feature modules which are assigned to be lazy-loaded are loaded asynchronously right after the eager loaded modules are done loading. Which simply means when a preloading strategy is used feature modules won’t have to wait to get load until the user navigate to them.

Preloading strategies in angular…

Angular has a abstract class called PreloadingStrategy, by default it provides two sub classes. which are;

• NoPreloading: Default strategy in angular, which provide no preloading for any module.
• PreloadAllModules: Preload all the lazy-loading module as quickly as possible.

To use any of the above strategies what you have to do is add the strategy in your app-routing.module.ts as shown below.

...
  imports: [
    RouterModule.forRoot(ROUTES,
    {
      preloadingStrategy: PreloadAllModules
    })
  ],

Custom Pre-loading strategy…

Get Muthu Devendra’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Now let’s try to use our own pre-loading strategy. First lets import the class CustomPreloadingStrategy as the preloading strategy in app-routing.module.ts we will write the class in next phase.

next is configuring our routes to help with new preloading strategy.

When configuring routes we have used a flag in the property called ‘data’. You can use as many as flags you like using any name you prefer. In above example I have used flag named, ‘preload’ to Notify if the module is to be preload or not.

Finally lets write the custom strategy service class which implements class PreloadingStrategy.

If you check the userModule again in routes we have specified it with the property data and the attribute preload. According to our CustomPreloadingStrategy implementation, by checking the value of data.preload:true we are confirming if the module mean to be preloaded and if the preload value is not true the module won’t be preloaded.

preloading strategy with module loading delay…

We can also delay the preloading time by giving another flag to the strategy. let’s put a flag called delay to some of the routes in our routing-module.

Now we have to modify customPreloading.ts class to support delay functionality as well. I have put delay time as 10000 milliseconds for demonstration purposes.

Now we are done with our custom preloading strategy with delay time. Let’s have a look at the result.

It shoes the result of preloading and preloading delay of product and shopping-cart modules along with the lazy loading of user module.

If this article was helpful, click on the clap 👏 button below to show your support! Thank you for reading 😊😊