Today, we are going to discuss step by step guide on Angular 11 lazy loading So, let’s be excited about implementing and learning Angular Lazy Loading!

Before going to learn Angular lazy loading steps first we go through its simple description. Lazy loading is a technique that allows loading javascript components when respective routes are active or being hit. Its helps to increase the performance and speed of application by splitting in the various bundle as per user navigation and bundles are loaded as required.

Now, its time to Follow Guide on Angular 11 Lazy Loading

**Create a module and separate routing file **

The independent routing helps to handle all components which are associated with the angular lazy-loading module.

ng g m lazy-loading --routing

**Create a Component **

The next step is to develop a component named lazy-demo in the lazy-loading module.

ng g c lazy-demo
**

**Adding link To Header **

Now, add the link in the header on the route that implements lazy loading **

app.component.html

<li class="nav-item">``````
<a class="nav-link" [routerLink]="['/lazy-loading']">
Lazy Loading
</a>
</li>

Lazy Loading with loadChildren

Next, you can easily load the components displayed on the route – /lazy-loading and make needed changes in app-routing.module.ts.

Moreover, there are many other steps further to implement lazy loading to learn in more exiting and proper way read our full article on the Angular 11 lazy loading to develop your existing Angular application.

##angular ##angularlazyloading #angular-js