Lazy Loading a Component in Angular
Posted By : Ishaan Madan | 30-Apr-2018
In Angular, the technique through which this can be achieved in "Lazy loading". Lazy loading enables us to load angular components in an asynchronous manner only when a particular route is enabled.
ng new lazyDemo --routing
In this step we will create a module that we will use for lazy loading. We will also add a couple of components in it namely "lazy-parent" and "lazy-child". The --flat flag used in the commands is used to prevent the creation of a directory so that we can easily add components to the module using Angular CLI.
ng g module lazy --flat
ng g component lazy-parent --module lazy
ng g component lazy-child --module lazy
Import "RouterModule" inside the lazy module. There are two things to consider here:
- path: 'load-me' is the route path to the component although it would be activated on "lazy/load-me". It is the child route and it will be integrated in step 3
- The "RouterModule" has "forChild(routes)".
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LazyParentComponent } from './lazy-parent/lazy-parent.component';
import { LazyChildComponent } from './lazy-child/lazy-child.component';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: 'load-me', component: LazyParentComponent }
];
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(routes)
],
declarations: [
LazyParentComponent,
LazyChildComponent
]
})
export class LazyModule { }
Step 3: Pointing App-Router towards the Lazy Module
Our Last step is pointing the route towards the created lazy module from app router. This can be done using "loadChildren" property and passing path to module. We woulld also need to reference the module using a "#" to tell angular to load "LazyModule" only when the concerned url is active.
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: 'lazy', loadChildren: './lazy.module#LazyModule'}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Thanks
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Ishaan Madan
Ishaan, a skilled technical project manager, excels at breaking down complex projects into manageable tasks. With a background in both technology and project management, he offers a unique perspective to every project he undertakes. His effective communication skills enable him to collaborate seamlessly with both technical and non-technical stakeholders, ensuring everyone is aligned towards shared objectives. He has hands-on experience in utilizing agile methodologies like Scrum and Kanban to drive project management and foster team collaboration. He leverages project management tools such as JIRA, Trello, and Clickup to monitor progress, manage tasks, and facilitate communication among team members and stakeholders. Moreover, his proficiency in full-stack development empowers him to comprehend the technical aspects of projects and provide guidance to developers when necessary. He demonstrates expertise in utilizing popular Python frameworks like Django and Flask, along with data analysis and manipulation libraries such as NumPy and Pandas. On the front-end, Ishaan adeptly employs JavaScript libraries like React and Angular to craft visually appealing and user-friendly interfaces. Additionally, he possesses proficiency in HTML, CSS, and JavaScript for designing responsive and mobile-friendly layouts.