Angular is a prominent development framework for single-page web application development. Initially, designed for JavaScript, Angular 4 also supports languages like Dart and Typescript. Angular is a platform loved by millions of users due to its productivity and scalable infrastructure. Using Angular, you can build features quickly with simple, declarative templates. Angular is developed with primary focus on mobile. So, developers need to put a tremendous effort in making Lazy Loading as easy as possible. With Lazy Loading, the initially loaded application will look small. In this post, you will learn why we need Lazy Loading in Angular 4 and the quick and easy steps to create that.

Why do we need Lazy Loading in Angular 4?

Lazy loading is a technique in Angular that allows you to load JavaScript components asynchronously when a specific route is activated. It improves the speed of the application load time by splitting the application into several bundles. When the user navigates through the app, the bundles are loaded as required.

Usually, Angular will load all components while starting the application (page). As you can see, all the declarations and imports are in app.module.ts file. This file will load all imported components and injected providers during the first page load.

app.module.ts image

Most of the time, users can see only the home page (home page component), but we need to download all the components at the first time. This will make our application slow. That is why we need Lazy Loading to improve the performance of loading time of the application.

How Lazy Loading works?

Lazy Loading is loaded only when we need to start the application for the first time. If the user navigates to a new page, then the component for that page will load immediately. Lazy loading avoids the need for downloading the component each time when you visit the page.

Steps to implement Lazy Loading:

Step 1:

Starting with a new Angular 4 project, we can create new project using ng command.

$ ng new lazyDemo –routing

This routing flag automatically creates route module for our project.

This will create a new Angular project with default route module and all dependency files. The structure will appear like this:

Structure of project, default route module and dependency files.

Step 2:

Create lazy loading module

To create a new module, we can use the following command:

$ ng g module lazy –flat

The flat flag is used to generate the files for lazy directory without embedding it into a app\ directory.

Step 3:

Now we have to create two new components to demonstrate lazy loading.

$ ng g c lazy-parent

$ ng g c lazy-child

This will create the component, html and css files automatically in the lazy-parent and lazy-child directory.

Now the project structure will be like this:

lazy-parent and lazy-child directory structure image

Step 4:

Next we need to register our lazy-parent and lazy-child components in the lazy.module file.

lazy-parent and lazy-child components in lazy.module file

Here, you can see that both child and parent components are registered in the lazy.module file and we have created a new route in the module file.

Step 5:

Now, you need to remove the lazy-child and lazy-parent registration from app.module file.

removing lazy-child and lazy-parent registration from app.module file

Step 6:

Next, you need to point the app routing to the lazy loading module.

pointing the app routing to lazy loading module

The highlighted section above shows that we have registered the LazyModule. For loading the LazyModule, we use the # symbol with the path.

Step 7:

As we have completed all the configuration in type script files, we can change some codes in html files.

First we need to add the routerLink in app.component.ts file.

adding routerLink in app.component.ts file

In highlighted section, we have pointed the routerLink to our LazyModule routes.

Step: 8

Now we can change the lazy-parent html file to load the lazy-child component.

loaded lazy-child component

Highlighted section shows that the lazy-child component is loaded.

Running Lazy Load

Now we have completed all basic steps for lazy loading. Let’s start the application and see how lazy it is.

Simply run ng serve to start the application. Open Chrome Dev Tool by pressing F12, then go to Network tab. When you navigate to a new page, you will see that *.chunk.js will download as if that page was never visited before.

downloaded *.chunk.js

Angular offers incredible tooling. Along with existing components, you can also extend the language with your own custom components. Rather than worrying about how the code works, you can focus on building amazing apps. Running Lazy Loading in Angular will allow you to reschedule the initialization of an object until the point at which it is needed. This improves the efficiency of the program.

Hope you have found these steps useful. Subscribe to our blogs for getting more informative tips.

Posted by Surjith P

Surjith is a Senior Software Engineer at Zerone Consulting. He is an enthusiastic developer who loves to explore and write about technology. He has a vast experience in Microsoft technologies. Currently, he is focusing on Angular and Ionic frameworks.

Leave a Reply