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.

Practice

1. What is the main purpose of lazy loading modules in Angular routing?

easy

A. To preload all modules when the app starts

B. To load modules only when the user navigates to their route

C. To load modules in alphabetical order

D. To load all modules at once for faster navigation

Solution

1. Step 1: Understand lazy loading concept

   Lazy loading means delaying the loading of a module until it is needed, usually when the user navigates to a route that requires it.

2. Step 2: Identify the purpose in routing

   In Angular routing, lazy loading helps improve app speed by loading modules only on demand, not all at once.

3. Final Answer:

   To load modules only when the user navigates to their route -> Option B

4. Quick Check:

   Lazy loading = load on demand [OK]

Hint: Lazy loading means load modules only when needed [OK]

Common Mistakes:

• Thinking lazy loading loads all modules at start
• Confusing lazy loading with preloading
• Assuming lazy loading loads modules alphabetically

2. Which of the following is the correct syntax to lazy load a module named AdminModule in Angular routes?

easy

A. { path: 'admin', loadChildren: import('./admin/admin.module') }

B. { path: 'admin', loadChildren: './admin/admin.module#AdminModule' }

C. { path: 'admin', component: AdminModule }

D. { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }

Solution

1. Step 1: Recall Angular lazy loading syntax

   Angular uses dynamic import with a function returning a promise that resolves to the module class.

2. Step 2: Match syntax to options

   { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) } uses the correct arrow function with import and then to get AdminModule. { path: 'admin', loadChildren: './admin/admin.module#AdminModule' } is old deprecated string syntax. Options C and D are incorrect usage.

3. Final Answer:

   { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) } -> Option D

4. Quick Check:

   Dynamic import with arrow function = correct syntax [OK]

Hint: Use arrow function with import().then() for lazy loading [OK]

Common Mistakes:

• Using deprecated string syntax for loadChildren
• Assigning component instead of loadChildren
• Omitting the arrow function wrapper

3. Given this route configuration snippet:

{ path: 'shop', loadChildren: () => import('./shop/shop.module').then(m => m.ShopModule) }

What happens when the user navigates to /shop for the first time?

medium

A. The ShopModule is already loaded at app start, so navigation is instant

B. Navigation fails because loadChildren requires a component

C. The ShopModule is loaded asynchronously and its routes are activated

D. The entire app reloads to load ShopModule

Solution

1. Step 1: Understand lazy loading behavior on navigation

   When navigating to a lazy loaded route for the first time, Angular loads the module asynchronously.

2. Step 2: Identify what happens on first navigation

   The ShopModule is fetched, loaded, and its routes become active, enabling the user to see the shop page.

3. Final Answer:

   The ShopModule is loaded asynchronously and its routes are activated -> Option C

4. Quick Check:

   First navigation triggers async module load [OK]

Hint: First visit loads module asynchronously, not at app start [OK]

Common Mistakes:

• Assuming module loads at app start
• Confusing loadChildren with component property
• Thinking app reloads on lazy load

4. Identify the error in this Angular route configuration for lazy loading:

{ path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' }

medium

A. Using string syntax for loadChildren is deprecated and causes errors

B. Missing component property for the route

C. Path should be capitalized as 'Dashboard'

D. loadChildren should be a component, not a string

Solution

1. Step 1: Check loadChildren syntax

   The string syntax with '#ModuleName' is deprecated in Angular and may cause errors in recent versions.

2. Step 2: Identify correct syntax

   Modern Angular requires loadChildren to be a function returning a dynamic import promise, not a string.

3. Final Answer:

   Using string syntax for loadChildren is deprecated and causes errors -> Option A

4. Quick Check:

   Use dynamic import function, not string [OK]

Hint: Avoid string syntax; use dynamic import function [OK]

Common Mistakes:

• Using old string syntax for loadChildren
• Confusing component and loadChildren properties
• Ignoring case sensitivity in paths

5. You want to lazy load a feature module ProfileModule only when the user navigates to /profile. The module has child routes. Which is the best way to configure the main app routing to achieve this and ensure accessibility and performance?

hard

A. { path: 'profile', loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule), canActivate: [AuthGuard] }

B. { path: 'profile', component: ProfileModule }

C. { path: 'profile', loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule) }

D. { path: 'profile', loadChildren: './profile/profile.module#ProfileModule' }

Solution

1. Step 1: Identify modern lazy loading syntax

   The correct syntax uses dynamic import with an arrow function returning a promise: loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule).

2. Step 2: Consider best practices for accessibility and performance

   For protected features like a user profile, adding canActivate: [AuthGuard] ensures secure access while lazy loading maintains performance.

3. Step 3: Eliminate incorrect configurations

   Using component property fails for modules with child routes. String syntax like './profile/profile.module#ProfileModule' is deprecated.

4. Final Answer:

   { path: 'profile', loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule), canActivate: [AuthGuard] } -> Option A

5. Quick Check:

   Lazy load with guard for best practice [OK]

Hint: Lazy load with import and add guards for security [OK]

Common Mistakes:

• Using component instead of loadChildren for modules
• Using deprecated string syntax
• Forgetting route guards for protected routes