How to implement lazy Loading in Angular?

Lazy loading also known as on-demand loading is the design pattern of an application that helps to boost the loading performance of an application.

Unlike eager loading, Lazy Loading only load the resources when required. By default, angular load all the registered components at once when the application initialize for the first time even if the user is not going to visit that page.

We can implement lazy loading is angular application with few changes in default routing functionalities.
Let’s implement lazy loading in angular with new CLI application.

Create and Run the New Angular 7 CLI application.

If you have not created an angular application before, you have nodeJs installed on your machine.

Then, install the latest version of angular CLI using this command.

Now, run the command below to create a new application with name LazyLoading-Angular.

Switch to the root folder of application.

After that, open the application on visual Studio Code (if you have Visual Studio Code already installed on your machine) like this,

The default folder structure of the angular application looks like this.

lazy Loading in angular

By default, angular CLI application create a base module (app.component.ts), bootstrap component along with its HTML and CSS files(app.component.ts) and the base routing module (app-routing.module.ts).

If the application is designed without considering to use lazy loading, the base module of the application will have all the components declared. As a result, the application is forced to initialize all the components when the application starts.

In the next step, we are going to load the angular components on demand by implementing lazy loading.

Lets create the two angular components by running the commands below one by one from the root folder of an application.

This command will automatically register these two components on the AppModule like this.

lazy Loading in angular

Run the application using ng serve command and open the chrome browser on (http://localhost:4200/).

Now, launch the chrome debugging tool and search for components. You will see both components loaded eagerly as expected as shown in this picture.

lazy Loading in angular

Implement Lazy Loading in Angular

After experimenting this default eager loading behavior, we are going to modify the application to use lazy loading.

Create the respective module file in each component folder with these name.

first.module.ts
second.module.ts

Also, create the respective routing file in each component folder with these name.

first-routing.module
second-routing.module

Now, the app folder structure looks like this.

lazy Loading in angular

Now lets start adding code from first-routing.module.ts.

Nothing fancy in this code, we have created the routing  module for our first module. All the routing related to first lazy module will be registered here.

Now this FirstRoutingModule will be imported inside first.module.ts like this.

Besides FirstRoutingModule, FirstModule also has FirstComponent declared inside declarations array.

The SecondRoutingModule and SecondModule will have the same straight forward code logic.

Now, we need to make few modifications on base module and base routing module i.e app.module.ts and app-routing.module.ts.

Here, we will load our lazy modules using loadChildren property of Route. The loadChildren value is the module class name with # followed by module class path.

The path value ‘first‘ and ‘second‘ will be the base path for lazy modules FirstModule and SecondModule respectively.

One important point to notice here is the use of forRoot() with RouterModule. The FirstRoutingModule and SecondRoutingModule has the use of forChild() instead because they are the child modules.

The little change on AppModule is the removal of FirstComponent and SecondComponent that are being used with the example of eager loading.

Now these components are declared already at their respective modules.

Reload the application on chrome browser, launch the chrome debugger tool and let’s see if the FirstComponent and SecondComponent are loaded or not initially.

lazy Loading in angular

Now, change the router as http://localhost:4200/first, and search for First.component.ts. You must have find it now. Try the same with second component now.

Cool. huh?

This is call on-demand or lazy loading, which serves you the resources when required.

While working on the large application, lazy loading have the huge impact on the loading performance of an application.

You can find the Source Code on GitHub.

Happy coding.

About dipneupane

Dip is a passionate Software Developer based in Kathmandu, Nepal. He chew code and smash keyboard for living. Apart from that, he writes about almost everything on buzzedcode.com.

View all posts by dipneupane →

Leave a Reply

Your email address will not be published. Required fields are marked *