Lazy Loading in Angular: Improving Performance and User Experience

Lazy loading is a technique used in Angular to optimize the performance of an application by loading the necessary components only when they are required, rather than loading them all at once when the application starts. This means that the application will only load the required components when the user navigates to a particular route, reducing the initial loading time and improving the overall user experience.

Lazy loading in Angular can be achieved by using the loadChildren method in the routing module. This method allows you to load a module lazily, only when it is required. For example, let's say you have a feature module named 'AccountModule' that is only required when the user navigates to the dashboard route. Instead of loading the entire module when the application starts, you can use the loadChildren method to load the module only when the user navigates to the account route.

Here's an example of how to use the loadChildren method in the routing module:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

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

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

In this example, when the user navigates to the dashboard route, the AccountModule will be loaded lazily using the import() function, which returns a Promise that resolves to the module's class. This technique can be used for any feature module that is not required when the application starts, resulting in faster loading times and a better user experience.

Look at a working example on GitHub.