Lazy loading is a design pattern that is widely used in modern web development frameworks like Angular. It is a technique of loading only the required components or modules on demand, rather than loading everything upfront. By using lazy loading in our Angular application, we can improve the performance and the user experience by reducing the initial loading time. In this article, we will explore the guide to lazy loading in Angular.
### What is Lazy Loading?
Lazy loading is a technique for loading code on demand when it is needed, rather than all at once. This technique is also known as on-demand loading, deferred loading, or dynamic loading. In Angular, lazy loading helps to boost performance and reduce the initial loading time of the application. By using lazy loading, we can split our application into smaller, more manageable chunks that can be loaded on demand.
### How Does Lazy Loading Work?
In Angular, lazy loading works by splitting the application into multiple modules. Each module represents a different part of the application, and each module can be loaded separately when needed. When the user navigates to a particular part of the application, the corresponding module is loaded dynamically. This means that the initial loading time is reduced, and only the necessary resources are loaded for that particular module.
### Types of Angular Lazily Loaded Modules
There are two types of Angular lazily loaded modules: feature modules and shared modules.
#### Lazy Loaded Feature Modules
Lazy loaded feature modules are modules that contain features that are not required when the application first loads. They are loaded only when the user navigates to the corresponding feature. This technique can dramatically reduce the size of the initial bundle, thus improving performance. The feature module is typically declared using the `@NgModule()` decorator along with the `loadChildren` property.
#### Lazily Loaded Shared Modules
Lazily loaded shared modules are modules that contain shared components, directives, and services that are used across multiple feature modules. These modules are loaded only when necessary. It’s essential to note that if we use the same shared module in multiple feature modules, the module is loaded only once.
### How to Implement Lazy Loading in Angular
Implementing lazy loading in Angular is relatively straightforward. We need to follow a few simple steps.
#### Step 1: Create a Feature Module
The first step is to create a feature module that encapsulates the corresponding feature. The feature module should import and declare all the required components, directives, and services.
“`
import { NgModule } from ‘@angular/core’;
import { CommonModule } from ‘@angular/common’;
import { RouterModule } from ‘@angular/router’;
import { FeatureComponent } from ‘./feature.component’;
@NgModule({
declarations: [
FeatureComponent
],
imports: [
CommonModule,
RouterModule.forChild([{ path: ”, component: FeatureComponent }])
]
})
export class FeatureModule { }
“`
#### Step 2: Update the App Routing Module
The second step is to update the app routing module to load the feature module lazily. We can use the `loadChildren` property to load the feature module lazily. For example, the following code snippet shows how we can load the feature module lazily.
“`
import { NgModule } from ‘@angular/core’;
import { Routes, RouterModule } from ‘@angular/router’;
const routes: Routes = [
{ path: ‘feature’, loadChildren: () => import(‘./feature/feature.module’).then(m => m.FeatureModule) }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
“`
#### Step 3: Update the Feature Component
The final step is to update the Feature component to load any additional resources required to render the component. We might need to load additional styles, scripts, or data before rendering the component.
“`
import { Component, OnInit } from ‘@angular/core’;
import { HttpClient } from ‘@angular/common/http’;
@Component({
selector: ‘app-feature’,
templateUrl: ‘./feature.component.html’,
styleUrls: [‘./feature.component.scss’]
})
export class FeatureComponent implements OnInit {
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get(‘/api/data’).subscribe(data => console.log(data));
}
}
“`
This code snippet shows how we can use the `HttpClient` service to load data from the server before rendering the component.
### FAQs
#### What are the benefits of using lazy loading in Angular?
Lazy loading helps to reduce the initial loading time of the application by loading only the required modules and resources when needed. This technique improves performance and provides a better user experience.
#### Are there any downsides to using lazy loading in Angular?
The primary downside of using lazy loading in Angular is that it adds complexity to the application. We need to manage multiple modules, and the application can become harder to maintain.
#### When should we use lazy loading in Angular?
We should use lazy loading in Angular when we have a large application with many features. We can split the application into smaller, more manageable chunks that can be loaded on demand. This technique can improve application load times and provide a better user experience.
#### Can we use lazy loading with Angular CLI?
Yes, we can use lazy loading with Angular CLI. We need to follow the steps outlined above to create a lazy loaded feature module, update the app routing module, and load any additional resources required in the feature component.
#### What is the difference between eager loading and lazy loading in Angular?
Eager loading loads everything upfront when the application is first loaded. Lazy loading, on the other hand, loads modules on demand when they are required. Eager loading can be faster initially, but lazy loading can provide better performance overall by reducing the initial loading time of the application.