Lazy loading in Angular 12 or other in versions
Angular introduction
Angular is a javaScript framework introduced by google .Actually this is open source full stack web application framework special developed for SPA(single page application).Angular provides many features and with the help of the this framework we can create not only web applications but also hybrid and native applications with the help of some other frameworks like IONIC ok let's move forward to the main topic i wil provide another article for ionic how we can use it to create hybrid and native applications.
So Hello friends and readers myself Anil and from India today i will try to cover the one of the best feature of the angular known as lazy loading .
What is lazy loading ?
So to know more about lazy loading first of all we have to understand routing if you have never implemented routing in angular before then you have to have a look on it first from the official blog of Angular.
Routing :-
so routing is the feature in angular to navigate from one component to another means if we want to create web application and we are creating a component for some content so you will create a component like this
import { Component, Input, OnInit, TemplateRef } from '@angular/core';
.....
@Component({
selector: 'app-root',
templateUrl: './your.component.html',
styleUrls: ['./your.component.scss']
})
export class yourComponent {
}
am i right....
command to create one component from CMD is
ng g c YourComponentName
ng - next generation
g- generate
c- Component
After this we have to add this component to the routing module so that we can navigate to this particular component
We can create the routing like this
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { your } from './search/search.component';
const routes: Routes = [
{ path: 'search', component: yourcomponentname },
]
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class YourModulenameRoutingModule { }
And thats it you can now navigate to this component wait wait wait ............
how the routing works ?
so see the routing basically load the TypeScript code to the javascript compiler and the javascript compiler will convert that code to browser understandable form means to js format but here you can see that if we will create huge component in case of large applications then we have to create huge component for each page so each time we will navigate to any component the browser will load all the content of theat whole application because we are creating all components inside one module means .
Take an example :-
If i have a basket and and i am fruit seller and i want sell mango , orange and many more ok so if i want to take all the fruit with me to sell then i have to keep all my fruits inside the basket correct ?
but if i will keep each fruit item inside another polythene then it will be easy for me to find out the particular fruit from basket as per buyer demand .
Like this if we will create separate module for each component then this will be easy to load all the component separately is not it .So for that we have to create separate modules now .We can also call this process to lazy loading feature.
And to create a lazy loading module we have to run this command on root of project folder
ng generate module yourcomponentname --route customers --module app.module
After generating this module we have to start implementing lazy loading routing .From first process of creating routing this is different from that .this module are also known as feature modules.
first of all we have to add the routing for the particular component inside own routing module
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Yourcomponent } from './.......;
const routes: Routes = [
{
path: '',
component: yourcomponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class CustomersRoutingModule { }
the file name should be like this yourmodulename.routig.module.ts you will get when you will fire above command on cmd
After that we have to use loadchildren feature to load this module like this inside main routing module
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: 'customers',
loadChildren: './yourcomponent/yourcoponent.module#CustomersModule'
},
{
path: '',
redirectTo: '',
pathMatch: 'full'
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes)
],
exports: [RouterModule],
providers: []
})
export class AppRoutingModule { }
Yes , finally we have implemented the lazy loading module so we can now simply navigate to the customer route to load only the required module or component contents is not it good .
Advantages of lazy loading
1.This feature is specially helpful for large applications.
2.This will make the application faster or performance will be good .
3.Less time required for javascript compiler to load some content on browser.
4.we will get more structured project structure .
Thanks for visiting our website please feel free to share your valuable opinion on comment section
Tags:
Angular