Angular Preloading Strategy

Angular Preloading Strategy is yet another way to speed up the load time of the Angular Apps. We build Modular apps using the Angular Modules. The Angular loads all the modules, when the user requests for the first time. This will make app loading slowly as it need to download all the modules. We can solve this problem by lazy loading those modules. The Angular allows us further optimize our app using a technique called PreLoading. In this article let us explore what is Preloader is. We will also learn to use the built in Preloading strategies like NoPreloading & PreloadAllModules. Later, we will look how to build a custom Preloading strategy so as to fully control what gets lazy loaded and what gets Preloaded.

Applies to: Angular 2 to the latest edition of i.e. Angular 8. Angular 9, Angular 10

What is Angular Preloading Strategy ?

Preloading in Angular means loading the Lazy loaded Modules in the background asynchronously, while user is interacting with the app. This will help boost up the loading time of the app

The Angular apps are modular and allows us build apps in chunks of modules. We can load these modules lazily, when the user navigates to a route. We need to mark the modules to be lazy loaded using the loadChildren property of the router.

By Lazy loading the modules, we can reduce the initial download size of the app, and thus making app load quickly. This is very useful in case of big apps. But when user navigates to a lazy loaded part of the app, the angular will have to download the module from the server, which means that user will have to wait for the download to finish.

By Preloading the lazy loaded module, the user do not have to wait for the module to be downloaded as the module is already downloaded in the background.

How to Enable Preloading

To make use of Preloading, first we need to enable lazy loading of the Modules. Mark the modules with the loadChildren, when you define routes as shown below. The angular will lazy load those modules.

And then, you can enable preloading by using the preloadingStrategy: PreloadAllModules, while registering the routes using the forRoot method.

Preloading Strategies

The Angular provides two built in strategies out of the box. one is PreloadAllModules and other one is NoPreloading

NoPreloading

This will disables all the preloading. This is default behavior i.e. if you don not specify the preloadingStrategy, then the angular assumes you do not want preloading

PreloadAllModules

This strategy will preload all the lazy loaded modules. 

Custom preloading strategy

With PreloadAllModules all the modules are preloaded, which may actually create a bottleneck if the application has large no of modules to be loaded.

The better way strategy would be

  1. Eagerly Load the modules required at startup. For Example authentication module, core module, shared module etc
  2. Preload all frequently used modules, may be after some delay
  3. Lazy load remaining modules

To selectively preload a module, we need to make use of custom preloading strategy.

First create a class, which implements the built in PreloadingStrategy class

The class must implement the method preload(). In this method, we determine whether to preload the module or not. The method signature is as follows

The first parameter is the active Route. We can use this to extract the information about the route, which is being is loaded.

The second parameter is Observable function, which we need to return if we want to preload this module. We can return Observable of null, if we do not wish to preload the module.

The following is a simple example of the preload method, which checks if the route has preload data defined. If defined it will return the load parameter, which will preload the module. If not then of(null) is returned indicating that the preload is not required

Example of Custom preloading strategy

In a real application, you may set a delay before preloading the module. You can also set different delay for different routes also.

Consider the following two routes. We have added data to the route. The both the routes have different delays.

The following is the CustomPreloadingStrategy class.

First, our class implements the PreloadingStrategy.

The preload method, which takes two arguments route and an observable and returns an observable

Next, we check the route data. If the preload is true, then we check for delay.

Next, we return the loadMe() after the specified delay using the timer. Before that we write to console the path being loaded.

And if not route.data is defined or preload is false, we return the observable of null of(null).

Finally, we need to provide it in the AppModule as shown below

The following image shows how after the delay admin & test modules are loaded.

You can also verify it from the Network tab.

Complete Source Code

app-routing.module.ts

app.component.css

app.component.html

app.component.ts

app.module.ts

custom-preloading-strategy.service.ts

admin/admin.module.ts

admin/admin.routing.module.ts

admin/dashboard.component.ts

test/test.module.ts

test/test.routing.module.ts

test/test.component.ts

References

PreloadingStrategy

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top