Preloading strategies in Angular - Mini Project: Build & Apply

Implementing Preloading Strategies in Angular

📖 Scenario: You are building an Angular application with multiple feature modules. To improve user experience, you want to preload some modules after the app loads so navigation feels faster.

🎯 Goal: Learn how to set up Angular routing with lazy-loaded feature modules and apply different preloading strategies to optimize loading behavior.

📋 What You'll Learn

Create an Angular routing module with two lazy-loaded feature modules named AdminModule and UserModule

Add a configuration variable called preloadStrategy to select the preloading strategy

Use the RouterModule.forRoot() method with the preloadingStrategy option to apply the selected preloading strategy

Complete the routing module setup to export the configured RouterModule

💡 Why This Matters

🌍 Real World

Preloading strategies help Angular apps load feature modules in the background, improving navigation speed and user experience.

💼 Career

Understanding Angular routing and preloading is essential for frontend developers building scalable, performant single-page applications.

1

Set up lazy-loaded routes

Create a constant called routes that is an array with two route objects. The first route has path set to 'admin' and lazy loads AdminModule using loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule). The second route has path set to 'user' and lazy loads UserModule similarly.

Angular

# Your code here to create the routes array with lazy-loaded AdminModule and UserModule

Need a hint?

Use the loadChildren property with dynamic imports to lazy load modules.

2

Add preloading strategy configuration

Create a constant called preloadStrategy and set it to PreloadAllModules imported from @angular/router.

Angular

import { PreloadAllModules } from '@angular/router';

const routes: Routes = [
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) },
  { path: 'user', loadChildren: () => import('./user/user.module').then(m => m.UserModule) }
];

# Define preloadStrategy constant here

Need a hint?

Import PreloadAllModules and assign it to preloadStrategy.

3

Configure RouterModule with preloading strategy

Import RouterModule from @angular/router and create a constant called AppRoutingModule by calling RouterModule.forRoot(routes, { preloadingStrategy }).

Angular

import { RouterModule } from '@angular/router';

const routes: Routes = [
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) },
  { path: 'user', loadChildren: () => import('./user/user.module').then(m => m.UserModule) }
];

const preloadStrategy = PreloadAllModules;

# Create AppRoutingModule using RouterModule.forRoot with routes and preloadStrategy

Need a hint?

Use RouterModule.forRoot with the preloadingStrategy option.

4

Export the routing module

Export the constant AppRoutingModule using export { AppRoutingModule }; to complete the routing setup.

Angular

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

const routes: Routes = [
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) },
  { path: 'user', loadChildren: () => import('./user/user.module').then(m => m.UserModule) }
];

const preloadStrategy = PreloadAllModules;

const AppRoutingModule = RouterModule.forRoot(routes, { preloadingStrategy });

# Export AppRoutingModule here

Need a hint?

Use the export keyword to make AppRoutingModule available for import.