Angular Lazy Load Modules

Angular has many features that allow us to configure applications to be as fast and high-performance as possible. One of the critical features that enable responsive, quick Angular apps is the ability to lazy load code with the Angular Router. In other words, Angular’s ability to delay code loading with the angular router.

The idea behind lazy loading is that only downloading the HTML, CSS and JavaScript it needs to create the first view of the application, and then load additional parts of the application when necessary. The good news is that Angular application has lazy loading by default. The angular router accepts location of the feature module with loadChildren and load only when the route becomes active.

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

const routes: Routes = [
  {
    path: '',
    redirectTo: 'feature-1',
    pathMatch: 'full'
  },
  {
    path: 'feature-1',
    loadChildren: './feature-1/feature-1.module#Feature1Module',
  },
  {
    path: 'feature-2',
    loadChildren: './feature-2/feature-2.module#Feature2Module',
  },
  {
    path: 'feature-3',
    loadChildren: './feature-3/feature-3.module#Feature3Module'
  }
];

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

Default basic angular lazy loading greatly increases the initial load time of the application. It can help the application load quickly, but if a user goes to a new page, that part of the application must be downloaded before the user can view it. There may be a slight delay while this download is taking, and it may take a few seconds if it is on a slow network.

We can further optimize this. When integrated into Angular, we can use preloading strategies. There are two that come out of the box with Angular; NoPreloading and PreloadAllModules. NoPreloading doesn’t preload any modules. PreloadAllModules loads all modules in the background. While the lazy loading style keeps the core starter pack small at first load and it also loads all of the lazy modules in the background. This means that the module is already loaded into memory when the user clicks the link. This mechanism allows Angular to start building immediately, instead of waiting for the module to be downloaded over the network.

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

const routes: Routes = [
  {
    path: '',
    redirectTo: 'feature-1',
    pathMatch: 'full'
  },
  {
    path: 'feature-1',
    loadChildren: './feature-1/feature-1.module#Feature1Module',
  },
  {
    path: 'feature-2',
    loadChildren: './feature-2/feature-2.module#Feature2Module',
  },
  {
    path: 'feature-3',
    loadChildren: './feature-3/feature-3.module#Feature3Module'
  }
];

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

preloadAllModules is a sensible default for most apps if needed it is also possible to define custom pre-loading strategies in Angular.