How to handle routing with lazy-loaded modules and components in Angular?

Angular is a powerful and feature-rich front-end framework, and one of its strengths is its ability to efficiently manage the application’s routing.

When dealing with large applications, it becomes essential to optimize performance by loading modules and components only when needed. This is where lazy loading comes into play.

Understanding Lazy Loading

Lazy loading is a technique in which modules or components are loaded on-demand, rather than loading everything when the application starts.

This can significantly improve the initial loading time of your Angular application, as it only loads the essential modules required for the current route.

Setting Up Lazy-Loaded Modules

Let’s go through the steps to set up lazy-loaded modules and components in Angular:

1. Create Feature Modules

Start by organizing your application into feature modules.

Each feature module should encapsulate a specific functionality or set of related components. For example, you might have a module for user authentication, another for user profile, and so on.

// user-auth.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [LoginComponent, RegisterComponent],
  imports: [
    CommonModule,
    RouterModule.forChild([
      { path: 'login', component: LoginComponent },
      { path: 'register', component: RegisterComponent },
    ]),
  ],
})
export class UserAuthModule {}

2. Configure Routes

In your main app-routing[EXCLUDED_PERIOD]module[EXCLUDED_PERIOD]ts, configure your routes to load the modules lazily using the loadChildren property.

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) },
  { path: 'user', loadChildren: () => import('./user-auth/user-auth.module').then(m => m.UserAuthModule) },
  // Other routes...
];

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

3. Update AppModule

Make sure to remove the imported modules from the AppModule to avoid unnecessary loading at the application startup.

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Benefits of Lazy Loading

1. Faster Initial Loading: Lazy loading reduces the initial loading time of your application since it only loads the modules required for the current route.
2. Improved Performance: Users only download the code they need, resulting in a more efficient application with better overall performance.
3. Easier Maintenance: Lazy loading makes your application more modular and easier to maintain. Each module can be developed and tested independently.
4. Optimized User Experience: Users only download the necessary resources, ensuring a smoother and faster user experience.

By incorporating lazy loading into your Angular application, you can enhance its performance, maintainability, and user experience.

It’s a valuable technique, especially for larger projects, where optimizing resource usage is crucial.