Lazy loading: Angular modules

What is Lazy Loading?

Lazy loading is a design pattern commonly used in computer programming and mainly in web design and development, is the practice of delaying loading, initializing resources or objects until they are actually required.

Why Lazy Loading?

Lazy Loading improves performance by reducing page weight to minimise load time and allowing faster page loading, Limits bandwidth usage by providing content to users only at their request and optimising the utilisation of server and client resources because only certain images, videos, JavaScript and other codes require rendering or execution.

To complete this tutorial, you will need:

NodeJS and NPM

Windows:

Download | Node.js

Linux:

step-1 :

sudo apt install nodejs

step-2 :

sudo apt install npm

Angular CLI

npm install -g @angular/cli

How To lazy load Angular modules ?

By default, NgModules are loaded impatiently, which means that once the application is loaded, all NgModules are loaded too, whether they are immediately needed or not. For large applications with lots of routes, consider lazy loading a design pattern that loads NgModules as needed.

Lazy Load Angular modules step by step

Step-1: Create new project

# ng new lazy-app --routing

Step-2: Create new module

# ng generate module landing-page --routing

or

# ng g m landing-page --routing

Step-3: Generate component in the new module

# ng generate component about/aboutMain

or

# ng g c about/aboutMain

Step-4: Declare the new component in about-routing.module.ts

src/app/about/about-routing.module.ts

import {AboutMainComponent} from "./about-main/about-main.component";

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

Step-5: Import the new module in app-routing.module.ts using loadChildern

src/app/app-routing.module.ts

const routes: Routes = [
  {
    path: 'about',
    loadChildren: () => import('./about/about.module').then( m => m.AboutModule)
  }
];

Step-6: Create another feature module with routing and component

# ng g m projects --routing
# ng g c projects/project-list

src/app/projects/projects-routing.module.ts

import {ProjectListComponent} from "./project-list/project-list.component";

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

src/app/app-routing.module.ts

const routes: Routes = [
  {
    path: 'about',
    loadChildren: () => import('./about/about.module').then( m => m.AboutModule)
  },
  {
    path: 'project',
    loadChildren: () => import('./projects/projects.module').then( m => m.ProjectsModule)
  }
];

Step-7: Change app.component.html

<h1>{{title}}</h1>
<span>
  <button type="button" routerLink="">Home</button>
  <button type="button" routerLink="/project">Project</button>
  <button type="button" routerLink="/about">About</button>
</span>
<router-outlet></router-outlet>

Step-8: Run the project

# ng serve -o

or

# ng s -o

Thank you for Reading!

Linkedin: iheb-mejri — Behance: Mejri-iheb — Facebook: ihebmejri15