Lazy Loading in Angular — A Complete Beginner-Friendly Guide

When you build a real-world Angular application, performance becomes extremely important. One of the best ways to improve your app speed is by using Lazy Loading. If you’re new to this concept, don’t worry — this guide explains everything in simple language with examples.

---

⭐ What is Lazy Loading?

Lazy Loading is a technique where Angular loads specific modules only when the user needs them instead of loading everything at the beginning.

This means:

• Your app loads faster
• Browser downloads less code
• Performance improves
• User experience becomes smoother

Think of it like a shopping mall:

        When you enter the mall, only the entrance is open. Other shops open only when you visit them.

        Angular works exactly the same way with modules.

⭐ Why Do We Need Lazy Loading?

Let’s look at some benefits:

✔ Faster Initial Load Time

If your project has many pages (dashboard, login, profile, product, admin), loading everything at once will slow down the app. Lazy loading fixes this.

✔ Better Performance

Your app downloads only the code the user currently needs — nothing extra.

✔ Reduced Bundle Size

The main JavaScript bundle becomes smaller, so the browser loads it quickly.

✔ Cleaner Project Structure

Features stay inside their own modules, making the code easier to manage. 

1. Create a project

> ng new my-app --no-standalone

2.Create a separe module 

> ng g m auth --routing

3.Crate your related component

>ng g c login

>ng g c forgotPassword

4. app-routing-module.ts

const routes: Routes = [

  {

   path:'auth',

   loadChildren:() => import('./pages/auth/auth.module').then(m => m.AuthModule)

  },

  {

   

  }

];

5.auth-routing-module.ts

const routes: Routes = [

  {

    path:'login',

    component:LoginComponent

  },

  {

    path:'fPassword',

    component:ForgotPasswordComponent

  }

];

6.Run application

>  http://localhost:4200/auth/login

⭐ When Should You Use Lazy Loading?

Lazy loading is helpful when your project grows large. Use it for:

• Dashboard module

• Admin module

• Product module

• Accounts module

• Reports module

• Authentication module

If your project has more than 5–6 screens, lazy loading becomes essential.