Module lazy loading preview in Angular - Step-by-Step Execution

Concept Flow - Module lazy loading preview

App starts

↓

User navigates to route

↓

Check if module is loaded

↓

Load module asynchronously

↓

Render module components

↓

User interacts with module

↓

App continues

This flow shows how Angular waits to load a module until the user navigates to its route, then loads it asynchronously and renders its components.

Execution Sample

Angular

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

Defines routes where the 'admin' module is loaded only when the user visits '/admin', saving initial load time.

Execution Table

Step	User Action	Module Loaded?	Action Taken	Result
1	App starts, user at '/'	No	Load HomeComponent immediately	Home page shown
2	User clicks link to '/admin'	No	Start loading AdminModule asynchronously	Loading spinner or blank until ready
3	AdminModule finishes loading	Yes	Render AdminModule components	Admin page shown
4	User navigates within AdminModule routes	Yes	Reuse loaded AdminModule	Fast navigation inside admin
5	User navigates away from '/admin'	Yes	Keep AdminModule loaded	No reload needed if return
6	User refreshes browser at '/admin'	No	Load AdminModule again	Admin page shown after load

💡 Execution stops when user leaves app or closes browser; modules remain loaded during session.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 5	Final
AdminModuleLoaded	false	true	true	true	true
CurrentRoute	'' (home)	'/admin'	'/admin'	'/home'	'/home'

Key Moments - 3 Insights

Why doesn't Angular load the AdminModule at app start?

Because the route uses loadChildren with a function, Angular waits until the user navigates to '/admin' before loading the module, as shown in execution_table step 2.

What happens if the user navigates back to '/admin' after leaving it?

Since AdminModule is already loaded (execution_table step 5), Angular reuses it without reloading, making navigation faster.

Does Angular unload modules when the user leaves their routes?

No, modules stay loaded during the app session to avoid reloading delays, as seen in variable_tracker where AdminModuleLoaded remains true after step 5.

Visual Quiz - 3 Questions

Look at the execution table, at which step does Angular start loading the AdminModule?

A Step 2

B Step 1

C Step 3

D Step 5

💡 Hint

Check the 'Action Taken' column for when loading starts.

According to variable_tracker, what is the value of AdminModuleLoaded after step 3?

A false

B true

C undefined

D null

💡 Hint

Look at the AdminModuleLoaded row under 'After Step 3' column.

If the user refreshes the browser at '/admin', what happens according to the execution table?

A HomeComponent loads instead

B AdminModule is already loaded and reused

C AdminModule loads again asynchronously

D App crashes

💡 Hint

See step 6 in the execution table for refresh behavior.

Concept Snapshot

Angular lazy loading delays loading a module until its route is visited.
Use loadChildren with a dynamic import function in route config.
This improves app startup speed by loading less code initially.
Once loaded, the module stays in memory for fast reuse.
Refreshing at a lazy route reloads the module asynchronously.

Full Transcript

This visual execution shows how Angular lazy loads modules. When the app starts, only the home component loads. When the user clicks the admin link, Angular checks if the AdminModule is loaded. If not, it loads it asynchronously. After loading, it renders the admin components. The module stays loaded for quick navigation inside admin routes. If the user leaves and returns, Angular reuses the loaded module. Refreshing the browser at '/admin' triggers loading the module again. Variables track if the module is loaded and current route. This approach speeds up app start by loading modules only when needed.

Practice

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

easy

A. To load modules only when they are needed, improving startup speed

B. To preload all modules at app start for faster navigation

C. To combine all modules into one big file for simplicity

D. To disable routing and load components manually

Solution

1. Step 1: Understand lazy loading concept

   Lazy loading means delaying the loading of parts of the app until they are needed, not all at once.

2. Step 2: Identify the benefit

   This reduces the initial load time and speeds up app startup by loading only essential code first.

3. Final Answer:

   To load modules only when they are needed, improving startup speed -> Option A

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
• Believing lazy loading disables routing

2. Which of the following is the correct syntax to lazy load a module named AdminModule located at ./admin/admin.module.ts in Angular routing?

easy

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

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

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

D. { path: 'admin', loadChildren: () => AdminModule }

Solution

1. Step 1: Recall Angular lazy loading syntax

   Since Angular 8+, lazy loading uses dynamic import syntax with loadChildren as a function returning a promise.

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 the module class.

3. Final Answer:

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

4. Quick Check:

   Dynamic import with arrow function = { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) } [OK]

Hint: Use dynamic import with arrow function for lazy loading [OK]

Common Mistakes:

• Using string syntax with # which is deprecated
• Assigning component instead of loadChildren
• Calling loadChildren without import

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 loaded immediately when the app starts

B. The ShopModule is never loaded and navigation fails

C. The ShopModule is loaded asynchronously only at navigation time

D. The ShopModule is loaded synchronously blocking the UI

Solution

1. Step 1: Understand lazy loading behavior on navigation

   With lazy loading, the module is not loaded at app start but only when the route is visited.

2. Step 2: Apply to given route

   When user navigates to '/shop', Angular triggers the dynamic import to load ShopModule asynchronously.

3. Final Answer:

   The ShopModule is loaded asynchronously only at navigation time -> Option C

4. Quick Check:

   Lazy load triggers on first navigation [OK]

Hint: Lazy loaded modules load on first route visit, not app start [OK]

Common Mistakes:

• Assuming module loads at app start
• Thinking navigation fails without preloading
• Believing loading blocks UI synchronously

4. Consider this incorrect route configuration:

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

What is the main issue with this code in Angular 17+?

medium

A. DashboardModule should be imported directly, not lazy loaded

B. Missing component property for the route

C. The path should be an array, not a string

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

Solution

1. Step 1: Identify deprecated syntax

   Angular versions 8+ require dynamic import syntax for lazy loading, not string with #.

2. Step 2: Explain impact

   Using string syntax causes build or runtime errors because Angular no longer supports it.

3. Final Answer:

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

4. Quick Check:

   String syntax deprecated = Using string syntax for loadChildren is deprecated and causes errors [OK]

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

Common Mistakes:

• Thinking component is required with loadChildren
• Confusing path type with string vs array
• Believing direct import is mandatory for lazy loading

5. You want to lazy load a feature module ProfileModule only when the user navigates to /profile. The module file is at ./profile/profile.module.ts. Which of the following route configurations correctly implements this with Angular 17+ standards and ensures accessibility and performance?

hard

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

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

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

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

Solution

1. Step 1: Use correct dynamic import syntax

   Angular 17+ requires loadChildren as a function returning a promise with dynamic import and then to access the module class.

2. Step 2: Verify accessibility and performance

   Lazy loading delays module load until navigation, improving performance. Using this syntax supports Angular's router and accessibility features.

3. Final Answer:

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

4. Quick Check:

   Dynamic import + then + lazy load = { path: 'profile', loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule) } [OK]

Hint: Always use dynamic import with then for lazy loading modules [OK]

Common Mistakes:

• Using deprecated string syntax
• Assigning component instead of loadChildren
• Missing .then() after import