How To Implement Lazy Loading In Angular

This article explains one of the key concepts in Angular - Lazy Loading. By going through this article, we will understand:

1. What is Lazy Loading in Angular?
2. When Lazy Loading is useful?
3. How to Lazy Load a Component in Angular?

What is Lazy Loading in Angular?

Lazy loading in Angular refers to the ability to load components as needed, rather than loading all components at once during the initial application load.

Lazy loading modules helps us decrease the start-up time as Application does not need to load everything at start-up and modules that are lazily loaded will only be loaded when the user navigates to their routes.

The following image represents the resulting build artifacts between default loading vs Lazy loading of some of the features:

Using Lazy loading, some of the feature modules (feature-n) are separated into different chunks, and these are only loaded if the user navigates to that specific route.

When Lazy Loading is useful?

When NgModule launches the angular application, it loads all the components and modules which are declared within, due to this application start up time will be increased and this will impact on the performance of our application.

Lazy loading is useful in Angular when an application has many components, and not all of them are needed for the initial load of the application.

By only loading the necessary components as they are needed, lazy loading can help improve the performance of an Angular application in several ways:

1. Reducing the initial load time of the application by loading only the necessary components.
2. Reducing the overall size of the main.js file by splitting the application bundle into smaller chunks.
3. Increase the modularity of the applications.
4. Improving the user experience by loading the components which are needed for the initial views only.
5. It’s allowing developers to break up the application into smaller, more manageable chunks, making the development, and maintenance easier.

How to Lazy Load a Component in Angular?

To implement lazy loading in an Angular application, we can use the Angular Router module, which allows us to specify a component to load lazily by using the "loadChildren" property in the route configuration.

Here's an example demonstration of how we can implement lazy loading for a component.

Step 1 - Create a new module and a component

Create a new module you want to load lazily, in this case, "AdminModule" and created component called "Home" inside admin module.

Step 2 - Define and Import Router module in Lazy Load module

In the "AdminModule" module, import the component you want to load lazily and add it to the "declarations" and "imports" arrays of the module. When registering routes in sub-modules and lazy loaded submodules then we need to use forChild(routes) as follows.

In the declarations, add the component that you want to load lazily.

Step 3 - Import the Angular Router module and configure the route

In the routing module of your application, import the Angular Router module and configure the route for the " AdminModule" component to be loaded lazily.

Step 4 - Verify lazy loading in Browser

Angular will load the module and component on demand when a specific route is activated in the browser. We can verify from the Network tab that a module is indeed being lazy loaded.

Summary

Lazy loading is a technique that allows angular components to load asynchronously when a specific route is activated and useful for angular applications with a large number of components, where not all of them are needed for the initial load of the application, to improve the overall performance, load time and user experience.

Happy Learning!