Implementing Angular Lazy Loading
Tags: angular, javascript, webdev
Published: 2021-11-29 14:25:36

---
title: Implementing Angular Lazy Loading
published: true
description: In this post, we'll explore the benefits of Angular lazy loading and how you can implement it in your source code.
tags: angular, javascript, webdev
canonical_url: https://blog.jscrambler.com/implementing-angular-lazy-loading/
cover_image: https://blog.jscrambler.com/content/images/2021/10/jscrambler-blog-angular-lazy-loading.jpg
---

When your Angular application loads, all the application modules are loaded whether they’re required or not. Now, it may not sound like much of an issue if the application is a small one but as its modules eventually grow it will slow down the entire application.

The answer to this problem is found through Lazy loading which is the technique to initially load only the required modules and to load the other modules only when they are actually required.

From the [official docs](https://angular.io/guide/lazy-loading-ngmodules),

> By default, NgModules are eagerly loaded, which means that as soon as the application loads, so do all the NgModules, whether or not they are immediately necessary. For large applications with lots of routes, consider lazy loading—a design pattern that loads NgModules as needed. Lazy loading helps keep initial bundle sizes smaller, which in turn helps decrease load times.

## Advantages of Lazy loading 
Lazy loading loads the resource as and when required, which results in:

 - Faster page loads
 - Better user experience
 - Bandwidth conservation

Now let's see the lazy loading in action.

## Implementing Lazy Loading
### Creating Angular app

Start by creating an Angular app using the Angular CLI.
```
ng new angular-app
```
Say `yes` to creating Angular routing and add the CSS stylesheet format.

Once the application is created, navigate to the project directory and run the application.
```
cd angular-app
npm start
```
You will be able to see the Angular app up and running.

Our application will have two modules, the Dashboard module, and the Home module. By default, you'll be loading the App module. The Home module and the Dashboard module will come into the picture when clicking the links in the App module.

### Creating the Dashboard Module
From your application root directory, execute the following command to create the Dashboard module.
```
ng g module dashboard --routing
```
The above command creates the dashboard module. `--routing` option creates the routing configuration for the module. Once the module command is executed you can check the application `src/app` folder, it will contain a `dashboard` folder for the Dashboard module. Inside the folder there will also be a file called `dashboard-routing.module` for routing specific to the module.

Now navigate to the dashboard module folder and create a component for the module.
```
cd .\src\app\dashboard\
ng g component chart
```
Modify the `dashboard-routing.module` file by adding the default route for the module which points to the `Chart` component. Here is how the file looks:
```
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ChartComponent } from './chart/chart.component';

const routes: Routes = [
  {path: '', component: ChartComponent},
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class DashboardRoutingModule { }
```
Add the following HTML to the `chart.component.html` file.
```
<h4>
    Welcome Dashboard
</h4>
```

### Creating the Home Module
Let's create the Home module. From the project root directory execute the following command:
```
ng g module home --routing
```
The above command creates the Home module with routing configuration.

Create a component inside the Home module by navigating to the Home module folder.
```
cd .\src\app\home\  
ng g component userHome
```
Modify the `home-routing.module.ts` file to set the default route to the `UserHomeComponent`. Here is the `home-routing.module.ts` file:
```
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserHomeComponent } from './user-home/user-home.component';

const routes: Routes = [
  {path: '', component: UserHomeComponent},
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomeRoutingModule { }
```
Let's add the following HTML to the `user-home.component.html` file.
```
<h4>
    Welcome Home
</h4>
```
Add the following HTML to the `app.component.html` file:
```
<h2>
  Welcome to course !!
</h2>
<a [routerLink]="'home'">Go to Home</a>
<a [routerLink]="'dashboard'">Dashboard</a>
<router-outlet></router-outlet>
```
### Without Lazy Loading
Add the component references to the `app.module.ts` file:
```
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ChartComponent } from './dashboard/chart/chart.component';
import { UserHomeComponent } from './home/user-home/user-home.component';

@NgModule({
  declarations: [
    AppComponent,
    ChartComponent,
    UserHomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```
Add the required routes to the `app-routing.module.ts`file:
```
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ChartComponent } from './dashboard/chart/chart.component';
import { UserHomeComponent } from './home/user-home/user-home.component';

const routes: Routes = [
  {path: 'dashboard', component: ChartComponent},
  {path: 'home',component : UserHomeComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
```
So as seen in the above `Routes`, a request to the `/dashboard` takes you to the `ChartComponent` in the `DashboardModule` and a request to the `/home` routes takes you to the `UserHomeComponent`.

Save the above changes and start the Angular application. On the default page, you'll be able to see two links to the home and to the dashboard respectively. If you click on either of the two links it takes you to the respective module.

![jscrambler-blog-without-lazy-loading1](https://blog.jscrambler.com/content/images/2021/10/jscrambler-blog-without-lazy-loading1.png)

If you check the console, you can see that the size of the `main.js` file is 15.4KB. That is all the component data that is being loaded. If you notice, we don't need the Dashboard module and the Home module on the initial load. You only need them once you click on their particular links. 

Now let's see how to achieve that using lazy loading.

### Lazy Loading 
 To lazy load the modules, go to the `app-routing.module.ts` file and use `loadChildren`. You don't need to import the module in the `app-routing.module.ts` but it will get imported dynamically during runtime.
Here is how the `app-routing.module.ts` file looks:
```
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule)},
  {path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
```
Modify the `app.module.ts` to remove the `Chart` component and `UserHome` component imports.
```
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 { } 
```
Save the changes and load the application. Now if you check the browser console on initial load the size of `main.js` has been reduced to 11.4KB.

![jscrambler-blog-with-lazy-loading2](https://blog.jscrambler.com/content/images/2021/10/jscrambler-blog-with-lazy-loading2.png)

If you click on any of the links you can see that the respective module file is loaded on demand. Please check the file indicated in red. It wasn’t there in the initial load.

![jscrambler-blog-lazy-loaded-module3](https://blog.jscrambler.com/content/images/2021/10/jscrambler-blog-lazy-loaded-module3.png)

## Conclusion
Lazy loading is an important Angular feature that helps to reduce the initial load time since it loads only the necessary files first. Other required modules are loaded on demand when you navigate to their particular route. 

Now, you can take adavantage of this feature to improve your app's load time. And lastly, if you want to learn how you can secure your Angular source code against theft and reverse-engineering, be sure to check <a href="https://blog.jscrambler.com/how-to-protect-angular-code-against-theft-and-reverse-engineering/?utm_source=dev.to&utm_medium=referral&utm_campaign=lazy-loading" target="_blank">our guide</a>.

The source code from this tutorial is available on [GitHub](https://github.com/jay3dec/angular-lazy-loading-demo).