Lazy loading modules with routes in Angular - Step-by-Step Execution

Concept Flow - Lazy loading modules with routes

App starts

↓

User navigates to route

↓

Check if module is loaded

↓

Load module dynamically

↓

Render module's component

↓

User interacts with module

When the user navigates to a route, Angular checks if the module is loaded. If not, it loads the module dynamically, then renders its components.

Execution Sample

Angular

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

Defines a route that lazy loads the AdminModule only when the user visits '/admin'.

Execution Table

Step	User Action	Module Loaded?	Action Taken	Rendered Output
1	Navigate to '/'	No	Load AppModule eagerly	App Home Component
2	Navigate to '/admin'	No	Load AdminModule dynamically	Admin Module Component
3	Navigate to '/admin' again	Yes	Use cached AdminModule	Admin Module Component
4	Navigate to '/unknown'	N/A	Show 404 or fallback	Not Found Component

💡 Execution stops when user navigates away or closes app.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
AppModuleLoaded	false	true	true	true	true
AdminModuleLoaded	false	false	true	true	true
CurrentRoute	''	'/'	'/admin'	'/admin'	'/unknown'

Key Moments - 3 Insights

Why does Angular load AdminModule only when navigating to '/admin'?

Because the route uses loadChildren with a dynamic import, Angular waits to load AdminModule until the user visits '/admin' (see execution_table step 2).

What happens if the user visits '/admin' multiple times?

After the first load, AdminModule is cached and reused without reloading (see execution_table step 3).

What if the user navigates to a route not defined?

Angular shows a fallback or 404 component because no module matches that route (see execution_table step 4).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of AdminModuleLoaded after step 2?

A false

B true

C undefined

D null

💡 Hint

Check the variable_tracker row for AdminModuleLoaded after step 2.

At which step does Angular use the cached AdminModule instead of loading it again?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the Action Taken column in execution_table for step 3.

If the user navigates to '/admin' first, what would AdminModuleLoaded be at step 1?

A false

B true

C null

D undefined

💡 Hint

Refer to variable_tracker and remember modules load only when route is visited.

Concept Snapshot

Lazy loading modules with routes in Angular:
- Use loadChildren with dynamic import in route config.
- Module loads only when user visits that route.
- Loaded module is cached for reuse.
- Improves app startup speed by loading less upfront.
- Unmatched routes show fallback or 404 component.

Full Transcript

Lazy loading modules with routes in Angular means the app loads some parts only when needed. When the user goes to a route like '/admin', Angular checks if the AdminModule is loaded. If not, it loads it dynamically and shows its components. If the user visits '/admin' again, Angular uses the already loaded module without loading again. If the user goes to a route not defined, Angular shows a fallback or 404 page. This helps apps start faster by loading less code upfront.