Preloading strategies in Angular - Step-by-Step Execution

Concept Flow - Preloading strategies

App starts

↓

Router initializes

↓

Check preloading strategy

↓

No Preload

↓

Load on

↓

User navigates

↓

Lazy modules loaded if needed

Shows how Angular router decides when and which lazy modules to load based on the chosen preloading strategy.

Execution Sample

Angular

const routes: Routes = [
  { 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 {}

Defines routes with lazy-loaded modules and sets the router to preload all modules after app start.

Execution Table

Step	Action	Preloading Strategy	Modules Loaded	Reason
1	App starts and Router initializes	PreloadAllModules	None yet	Router sets up routes
2	Check preloading strategy	PreloadAllModules	None yet	Strategy chosen to preload all
3	Start preloading lazy modules	PreloadAllModules	home module	Preloading all modules after start
4	Continue preloading	PreloadAllModules	home, about modules	All lazy modules preloaded
5	User navigates to 'home'	PreloadAllModules	home, about modules	Modules already loaded, instant navigation
6	User navigates to 'about'	PreloadAllModules	home, about modules	Modules already loaded, instant navigation
7	End of preloading	PreloadAllModules	home, about modules	All lazy modules loaded before navigation

💡 All lazy modules preloaded as per PreloadAllModules strategy, no further loading needed on navigation

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
modulesLoaded	[]	[home]	[home, about]	[home, about]
preloadingStrategy	undefined	PreloadAllModules	PreloadAllModules	PreloadAllModules

Key Moments - 3 Insights

Why are lazy modules loaded before user navigation when using PreloadAllModules?

Because PreloadAllModules tells Angular to load all lazy modules right after app start, as shown in execution_table steps 3 and 4.

What happens if no preloading strategy is set?

Lazy modules load only when the user navigates to their routes, so modulesLoaded stays empty until navigation, unlike PreloadAllModules.

Can we preload only some modules and not all?

Yes, by using a custom preloading strategy that decides which modules to preload, unlike PreloadAllModules which preloads all.

Visual Quiz - 3 Questions

Look at the execution_table, what modules are loaded after step 3?

A [about]

B []

C [home]

D [home, about]

💡 Hint

Check the 'Modules Loaded' column at step 3 in the execution_table.

At which step does the router finish preloading all lazy modules?

A Step 5

B Step 7

C Step 2

D Step 4

💡 Hint

Look for the step where 'All lazy modules loaded before navigation' is noted.

If we remove the preloadingStrategy option, how would modulesLoaded change at step 3?

A It would remain empty until navigation

B It would still preload all modules

C It would preload only the 'home' module

D It would preload only the 'about' module

💡 Hint

Refer to key_moments about behavior without preloading strategy.

Concept Snapshot

Angular Preloading Strategies:
- Controls when lazy modules load
- No preload: load on navigation
- PreloadAllModules: load all after app start
- Custom preload: load selected modules
- Improves user experience by loading modules early
- Set in RouterModule.forRoot() options

Full Transcript

This visual guide shows how Angular's preloading strategies work. When the app starts, the router initializes and checks the preloading strategy. If PreloadAllModules is set, Angular loads all lazy modules immediately after startup, before the user navigates. This means navigation to those modules is instant. Without preloading, modules load only when the user visits their routes. Custom strategies allow selective preloading. The execution table traces each step, showing modules loaded and why. Variable tracking shows how the list of loaded modules grows. Key moments clarify common confusions about when modules load. The quiz tests understanding of these steps and effects. This helps beginners see how preloading improves app speed and user experience.