Why do we need Lazy Loading in Angular 4?
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.
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:
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:
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.
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:
Next we need to register our lazy-parent and lazy-child components in the 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.
Now, you need to remove the lazy-child and lazy-parent registration from app.module file.
Next, you need to point the app routing to the 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.
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.
In highlighted section, we have pointed the routerLink to our LazyModule routes.
Now we can change the lazy-parent html file to load the 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.
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.