When building modern web applications, performance is everything—especially in admin dashboards. Admin panels are often loaded with dozens of routes, components, and modules. Without careful planning, users may experience sluggish performance, particularly during the initial load. That’s where lazy loading in Angular becomes a game-changer.

In this blog post, we’ll explore what lazy loading is, why it matters for admin dashboards, and how you can implement it effectively in Angular—with detailed code examples.

What is Lazy Loading?

Lazy loading is a design pattern that delays the loading of a module until it is required. In Angular, this means that modules associated with specific routes are not loaded at the application start but only when the user navigates to that route.

Instead of loading everything upfront, Angular breaks the app into chunks that are loaded on demand. This drastically reduces the initial bundle size, speeding up the time it takes for your app to become interactive.

Why Lazy Loading Matters in Admin Dashboards

Admin dashboards typically serve internal users—often power users—who need access to a wide range of features like:

• User management
• Reporting tools
• Configuration panels
• Logs and audit trails
• Complex data visualizations

Each of these features may reside in separate modules and may not be accessed on every visit. Loading all of them upfront is inefficient. Lazy loading ensures that only the necessary modules are fetched and rendered when the user actually needs them.

How to Implement Lazy Loading in Angular

Let’s go step-by-step with code.

1. Create Feature Modules

Suppose you have an admin dashboard with a User Management and a Reports section.

Use Angular CLI to generate feature modules:

ng generate module admin/user-management --route user-management --module app.module
ng generate module admin/reports --route reports --module app.module

This will:

• Create folders and modules
• Automatically add lazy-loaded routes to AppRoutingModule

The routing file (app-routing.module.ts) will now look like:

const routes: Routes = [
  {
    path: 'user-management',
    loadChildren: () =>
      import('./admin/user-management/user-management.module').then(
        (m) => m.UserManagementModule
      ),
  },
  {
    path: 'reports',
    loadChildren: () =>
      import('./admin/reports/reports.module').then(
        (m) => m.ReportsModule
      ),
  },
  { path: '', redirectTo: '/user-management', pathMatch: 'full' },
];

2. Set Up Feature Routing Modules

Inside user-management.module.ts, make sure routing is correctly configured.

// user-management-routing.module.ts
const routes: Routes = [
  { path: '', component: UserListComponent },
  { path: ':id', component: UserDetailComponent },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class UserManagementRoutingModule {}

// user-management.module.ts
@NgModule({
  declarations: [UserListComponent, UserDetailComponent],
  imports: [CommonModule, UserManagementRoutingModule],
})
export class UserManagementModule {}

3. Create the Components

ng generate component admin/user-management/user-list
ng generate component admin/user-management/user-detail

Example UserListComponent:

@Component({
  selector: 'app-user-list',
  template: `
    <h2>User Management</h2>
    <ul>
      <li *ngFor="let user of users" (click)="goToDetail(user.id)">
        {{ user.name }}
      </li>
    </ul>
  `,
})
export class UserListComponent {
  users = [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Smith' },
  ];

  constructor(private router: Router) {}

  goToDetail(id: number) {
    this.router.navigate(['/user-management', id]);
  }
}

4. Preloading Strategy (Optional but Recommended)

If you want to lazy-load modules but also preload them in the background, you can enable preloading:

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      preloadingStrategy: PreloadAllModules,
    }),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

This ensures that routes are lazy-loaded on demand, but also pre-fetched for a smoother experience if a user is likely to visit them.

5. Protect Routes with Guards (Optional)

Use route guards to protect sensitive admin modules:

canActivate: [AdminGuard]

// admin.guard.ts
@Injectable({ providedIn: 'root' })
export class AdminGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(): boolean {
    if (this.authService.isAdmin()) {
      return true;
    }
    this.router.navigate(['/access-denied']);
    return false;
  }
}

Bonus: Visualizing Lazy-Loaded Modules in Build

Run:

ng build --stats-json
npx webpack-bundle-analyzer dist/browser/stats.json

This lets you visualize the bundle and confirm that lazy-loaded modules are separated correctly.

GitHub Repository

You can find the complete source code here:  
👉 GitHub Repo

Feel free to fork it, experiment, or contribute improvements!

Wrapping Up

Lazy loading in Angular isn't just a nice-to-have—it's essential when dealing with feature-rich admin dashboards. It minimizes load time, improves responsiveness, and enhances scalability without sacrificing structure.

By following the steps above and using Angular’s robust module system, you can break your dashboard into focused, performant chunks. The result is a snappier and more efficient user experience for everyone who interacts with your admin tools.