Lazy loading is a process of loading components, modules or other assets of a website as required. Since, Angular creates a SPA (Single Page Application), all of its components are loaded, at once. Secondly, a lot of unnecessary libraries or modules might be loaded as well.
For a small application it would be okay, but as the application grows the load time will increase, if everything is loaded at once. Lazy loading allows Angular to load components and modules as and when needed.
First of all, to understand how lazy loading works in Angular, we need to understand the basic building blocks of the framework: NgModules.
In order to understand how Lazy Loading works we first need to understand the building block of Angular: NgModules.
Angular libraries like RouterModule, BrowserModule, FormsModule are NgModules. Angular Material, which is a 3rd party, is also a type of NgModule. NgModule consists of files & code related to a specific domain or having a similar set of functionalities.
A typical NgModule file declares components, directives, pipes, and services. It can also import other modules that are needed in the current module.
One of the important advantage of NgModules is they can be lazy loaded. Let's have a look at how we can configure lazy loading.
In this tutorial, we will create two modules Module A and Module B which will be lazy loaded. On the main screen we will have two buttons for loading each module lazily.
Create a new Angular project lazy-load-demo by executing the below command.
``` ng new lazy-load-demo --routing --strict --style css code lazy-load-demo ```Here, we are creating a new project with routing. Secondly, the strict mode is enabled. Lastly, we are mentioning the stylesheet format to css. The second command opens your project in VS Code.
By default, a root module or app module is created under /src/app. Below is the NgModule file created:
``` import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } ```First, we are importing all the required modules and components.
After that, @NgModule decorator states that AppModule class is a type of NgModule. The decorator accepts declarations, imports, providers, and bootstrap. Here are the descriptions for each of them:
index.html host web page.The main screen will have 2 buttons, namely, Load Module A & Load Module B. As the name suggests, clicking these buttons will lazily load each module.
For that, replace your app.component.html file with the contents below:
```Let's define the modules for routes a & b.
In order to create lazy loaded modules execute the below commands.
``` ng generate module modulea --route a --module app.module ng generate module moduleb --route b --module app.module ```The commands will generate two folders modulea & moduleb. Subsequently, each folder will contain their own module.ts, routing.ts and component files.
If you check your app-routing.module.ts you will see the below code for routes.
``` const routes: Routes = [ { path: 'a', loadChildren: () => import('./modulea/modulea.module').then(m => m.ModuleaModule) }, { path: 'b', loadChildren: () => import('./moduleb/moduleb.module').then(m => m.ModulebModule) } ]; ```It implies that when route a or b is visited load their respective modules lazily.
On running the project with ng serve, you will see the below screen:
On clicking Load Module A button, you will be routed to page a. This is how your screen should look like.
You should see a similar screen that says moduleb works! when clicked on Load Module B.
In order to verify the files loaded, open the developer tools by pressing F12. After that, visit the Network tab as you can see in the screenshot below. When you refresh the page it will show few files requested.
Go ahead and clear your list of requests by hitting the clear button as shown in the image on the right
When you click on the Load Module A, you will see a request for modulea-modulea-module.js as in the screenshot below. This verifies that the Module A was lazily loaded.
Similarly, when you click Load Module B, the moduleb-moduleb-module.js file is loaded. Hence, verifying that Module B was loaded lazily.
As we have seen, it’s very easy to create lazy loading modules. There are lots of use cases where they are useful, such as
For smaller websites, it might not matter much that all the modules are loaded at once. But, as the site grows it's very effective to have separate modules which are loaded as needed.
Because of lazy loading, load time for the websites can be reduced drastically. This is specially helpful when you are trying to rank higher in SEO's. Even if not, less loading times means better user experience.
Are you interested in more articles? Check these out: