How to Implement Angular routing in Lazy Loading

In the last blog, I had given you a basic idea about Angular Routing in Angular v11 and nest routing. When you do any activity, there is a mechanism called Routing that will decide what will be displayed on the screen. If you know front-end frameworks, then you might be very well aware of them. If you need to revise, you can always refer to the previous blog.

What is Lazy Loading?

You must be aware or might even have heard about Lazy Loading, which is also known by the asynchronous name loading while working with the frameworks. When you are working on any computer programming language and web design development, lazy loading is used for loading the JavaScript components and the development of the object.

If you want to administer lazy loading, you can always use an open-source lazy loading library like blazy.js, a lightweight library used for videos and different images. Another one is the LazyLoad library used when you want your images to be loaded instantly.

Why does everyone need to know about Lazy loading?

We need lazy loading because it reduces page load time, and so with the help of lazy loading, your page will crawl faster. The advantage that lazy loading provides in a website with few pages might initially not be understood. When the application is quite large, this technique will create a huge impact.

Steps for implementing Lazy loading:

1. Create a module and separate routing file:

With Angular to build distinct modules, handle all the components associated and separate the independent Routing, you can use lazy loading quickly and smoothly.

ng g m lazy-loading --Routing

2.Create a component:

You can create the element with lazy loading in the module and name it lazy-demo.

ng g c lazy-demo

3. Adding link to the header:

Then add the link to the header so that you can implement the route of lazy loading

App.component.html

<li class="nav-item">

<a class="nav-link" [routerLink]="['/lazy-loading']">

Lazy Loading

</a>

</li>

4. Lazy loading with loadChildren:

After that, it is almost time for implementing the route for the lazy loading component and, if necessary, also make some changes in it. So that it can load the module with the help of loadChildren.

/lazy-loading

app-routing.module.ts.

App-routing.module.ts

{

path: 'lazy-loading',

loadChildren: () => import('./lazy-loading/lazy-loading.module')

.then(m => m.LazyLoadingModule)

},

5. Setting up the route:

After all the above steps are done, the final step is route setting with lazy-loading-route.

Lazy-loading-routing.module.ts

import { NgModule } from '@angular/core';

import { RouterModule, Routes } from '@angular/router';

import { LazyDemoComponent } from './lazy-demo/lazy-demo.component';

const routes: Routes = [

{ path: '', component: LazyDemoComponent }

];

@NgModule({

imports: [RouterModule.forChild(routes)],

exports: [RouterModule]

})

export class LazyLoadingRoutingModule { }

Finally, you can watch it being loaded lazily.

How can you verify lazy loading in Angular?

There are different methods through which you can implement lazy loading in Angular, and one of the methods is:

For finding, you should run the below-mentioned command and generate

npm run build

After that, the result will look something like this:

It would be best if you always made sure that a different column is produced whenever you implement lazy loading and make sure that you will get accurate results by opening the dist folder of your project. You will notice that a separate file for the module uses Lazy Loading. Below is the reference image –

Conclusion:

All in all, these were the steps through which you can implement Angular Routes Lazy Loading from scratch. Many developers choose ngx-loadable in an existing Angular application to implement lazy loading. If you don’t know more about it and are curious about it, you can always search for it and refer to other blogs and articles.