Prefetching and Preloading Routes in Angular

Prefetching and preloading routes in Angular allows you to load modules in the background to improve the user experience. This tutorial covers the basics of setting up and using prefetching and preloading effectively in your Angular applications.

Setting Up Preloading

To set up preloading, you need to configure your routes and specify a preloading strategy:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes, PreloadAllModules } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'feature', loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule) }
];

@NgModule({
  declarations: [AppComponent, HomeComponent],
  imports: [BrowserModule, RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// home.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  template: '
Home Component
',
})
export class HomeComponent { }

// feature.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { FeatureComponent } from './feature.component';

const routes: Routes = [
  { path: '', component: FeatureComponent }
];

@NgModule({
  declarations: [FeatureComponent],
  imports: [CommonModule, RouterModule.forChild(routes)]
})
export class FeatureModule { }

// feature.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-feature',
  template: '
Feature Component
',
})
export class FeatureComponent { }

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { }

// app.component.html

Preloading Strategy

Angular provides a built-in preloading strategy called PreloadAllModules that preloads all lazy-loaded modules after the application has been bootstrapped:

// app.module.ts
import { RouterModule, Routes, PreloadAllModules } from '@angular/router';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'feature', loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule) }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
  // other configurations
})
export class AppModule { }

Custom Preloading Strategy

You can also create a custom preloading strategy to control which modules are preloaded:

// custom-preloading.strategy.ts
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';

export class CustomPreloadingStrategy implements PreloadingStrategy {
  preload(route: Route, load: () => Observable): Observable {
    return route.data && route.data.preload ? load() : of(null);
  }
}

// app.module.ts
import { CustomPreloadingStrategy } from './custom-preloading.strategy';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'feature', loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule), data: { preload: true } }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: CustomPreloadingStrategy })],
  // other configurations
})
export class AppModule { }

Key Points

Conclusion

Prefetching and preloading routes in Angular provides a powerful way to improve the performance and user experience of your applications by loading modules in the background. By understanding and using prefetching and preloading effectively, you can create efficient and user-friendly applications. Happy coding!