What is Preloading in Angular Routing?
💡 Concept Name
Preloading in Angular Routing – A strategy that allows Angular to load lazy-loaded modules in the background after the initial application load, improving perceived performance for users.
📘 Quick Intro
Angular’s preloading strategies enable lazy-loaded modules to be fetched in the background once the app is bootstrapped. This bridges the gap between lazy loading and user experience by preparing modules before they’re needed.
🧠 Analogy / Short Story
Imagine you're visiting a theme park. While you enjoy the first ride (main module), staff members quietly prepare the next rides (lazy modules) in the background so you don’t have to wait when you reach them. That’s Angular preloading.
🔧 Technical Explanation
- 🗺️ Angular supports
PreloadAllModulesand custom preload strategies. - ⏱️ Preloading happens after the app finishes loading the initial bundle.
- ⚙️ Configured via the
RouterModule.forRoot()method withpreloadingStrategy. - 🔌 You can create a custom strategy to preload only specific modules based on conditions.
💻 Real Code Example
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes, PreloadAllModules } from '@angular/router';
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
{ path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) }
];
@NgModule({
imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
exports: [RouterModule]
})
export class AppRoutingModule { }
❓ Interview Q&A
Q1: What is preloading in Angular?
A: Preloading allows Angular to load lazy modules in the background after the initial load.
Q2: What’s the default behavior if no preloading strategy is set?
A: Lazy modules load only when their route is visited.
Q3: How do you enable preloading for all modules?
A: Use PreloadAllModules strategy in RouterModule.forRoot().
Q4: Can we implement custom preloading logic?
A: Yes, by creating a custom preloading strategy class.
Q5: Does preloading affect the initial load time?
A: No, it happens in the background after initial load to avoid delays.
📝 MCQs
Q1. What is the purpose of preloading in Angular?
- Lazy load on click
- Load all upfront
- Load modules in background
- Disable lazy loading
Q2. Which Angular option enables all modules to preload?
- LoadAllModules
- PreloadAllModules
- AutoPreload
- EagerLoading
Q3. When does preloading occur in Angular?
- During build
- Before app loads
- After app loads
- While rendering routes
Q4. Can you preload specific routes?
- No
- Only with eager loading
- Yes, using custom strategy
- Only with guards
Q5. Where is preloading strategy configured?
- AppComponent
- NgModule
- RouterModule.forRoot()
- Angular.json
💡 Bonus Insight
You can use route data to guide custom preloading strategies, enabling smarter decisions like only preloading based on user roles or device types.
📄 PDF Download
Need a handy summary for your notes? Download this topic as a PDF!