Implement Lazy Loading In Angular
By: Tharmi Vijayakumaran
Tags: Angular, JavaScript, Programming, Coding, Web Development

Photo by Mike Burke on Unsplash

User experience of an application is very important to hold the users. When an application take a long time to load, then what do you feel Mr. user?

Yes surely it can’t retain you.

But, angular won’t let it happen to its application. Do you think Lazy Loading is lazy?

Angular adapts eager loading strategy by default. Eager loading loads all components declared in the app module at the initial stage of render of your application. When the number of components increases, the loading time taken to render your application is high. This makes users unhappy and gets away from your application. Solution is our lazy loading. Through lazy loading we can quickly render our application, it lets the loading of required components to render a page, makes the user experience better.

Lazy loading can be implemented for feature modules in an angular application. Particular feature module routes should be grouped into a single parent. Feature module should not be imported in another module(even not in app module)

To lazy load a feature module configure its parent route in app routing module as given below.

Importing of a feature module is an asynchronous operation and it returns a promise. when the promise is resolved the feature module will be loaded. This async function is assigned to the loadChildren property of RouterModule. This property is responsible for lazy loading.

When the application does initial rendering, the productModule is not loaded. We can see in the Network tab of the browser inspector.

Browser downloads the main bundles only. When we navigate to the parent route of ProductModule only, the lazy loaded ProductModule will be downloaded. We can see in the Network tab below.

By this we can speed up the loading. Time for loading decreases.

But, what happens if the route still has many components to be loaded. It becomes the same as eager loading. isn’t it? What will happen if we preload the other modules in the background while the first route component is loading?

Yes, that is a great idea. When other preload modules are loading at background, those modules will be available when the user accesses those. So the user no need to wait for loading of other lazy loaded modules.

There are some preloading strategies. By default, the application has no preloading. This is similar as usual to lazy loading. Preload all, these options let to you preload all of the lazy loaded modules. Custom preloading, this will control the preloading by configuring which preload module to be loaded and when it should be loaded.

Preloading strategy will be set in the RouterModule as the second argument of forRoot method.

Sometimes we intentionally avoid preloading of modules. Example we need to show the module content only for authenticated users. To do this we can apply a CanLoad guard which blocks the preloading. You can have a look at other guards in Angular in my previous tutorial.

To do custom preloading, we create a preload strategy service which implements PreloadingStrategy interface. In preload predefined function we write our code whether to call the load function and preload the lazy loaded module. After creating the custom preloading service, we assign this service to the preloadingStrategy argument in the forRoot function of RootModule.

I think now you might get an idea on lazy loading. See you in my next tutorial.