Lazy loading routes and modules in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a lazy-loaded Angular module route is first accessed?

Consider an Angular app with a lazy-loaded feature module configured in the router. What is the behavior when the user navigates to that route for the first time?

A The module is downloaded and initialized immediately when the app starts, regardless of route access.

B The module is downloaded and initialized only when the route is accessed for the first time.

C The module is downloaded but not initialized until the route is accessed.

D The module is neither downloaded nor initialized until the user clicks a button inside the app.

💡 Hint

Think about how lazy loading helps reduce initial load time by delaying module loading.

Lazy loading means the module is only downloaded and initialized when the user navigates to its route for the first time. This improves startup performance.

📝 Syntax

intermediate

Which route configuration correctly lazy loads a module in Angular?

Given a feature module named FeatureModule located at './feature/feature.module.ts', which route configuration correctly lazy loads it using Angular's modern syntax?

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

B { path: 'feature', loadChildren: './feature/feature.module#FeatureModule' }

C { path: 'feature', component: FeatureModule }

D { path: 'feature', loadChildren: () => FeatureModule }

💡 Hint

Modern Angular uses dynamic import syntax for lazy loading modules.

Option A uses the recommended dynamic import syntax returning a promise that resolves to the module class.

Option A is the deprecated string syntax.

Option A incorrectly uses a module as a component.

Option A returns the module directly without import.

🔧 Debug

advanced

Why does this lazy-loaded module fail to load with a 404 error?

An Angular app lazy loads a module with this route config:

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

But navigating to '/admin' shows a 404 error in the browser console. What is the most likely cause?

A The AdminModule does not have a RouterModule with routes defined inside it.

B The import path './admin/admin.module' is incorrect and causes a runtime error.

C The server is not configured to fallback to index.html for unknown routes, so direct navigation to '/admin' fails.

D The lazy loading syntax is invalid and causes a compilation error.

💡 Hint

Think about how Angular apps handle deep links and server configuration.

When refreshing or directly accessing a lazy-loaded route, the server must serve index.html for all routes. Otherwise, the server returns 404 because it doesn't know about Angular routes.

❓ state_output

advanced

How many times is a lazy-loaded module initialized during app lifetime?

If a user navigates multiple times to a lazy-loaded route in an Angular app, how many times is the module's constructor and initialization code run?

A Never; lazy-loaded modules are not initialized automatically.

B Every time the route is accessed, the module is reloaded and reinitialized.

C Twice: once on first access and once after every page refresh.

D Only once, the first time the route is accessed; subsequent navigations reuse the loaded module.

💡 Hint

Think about caching behavior of lazy-loaded modules in Angular.

Angular loads and initializes a lazy-loaded module once per app session. Later navigations reuse the already loaded module instance.

🧠 Conceptual

expert

What is the main benefit of lazy loading feature modules in Angular apps?

Choose the best explanation for why Angular apps use lazy loading for feature modules.

A It reduces the initial bundle size, speeding up app startup by loading code only when needed.

B It allows modules to be loaded in parallel to improve performance.

C It forces all modules to load at app startup to avoid delays later.

D It automatically caches all modules in the browser for offline use.

💡 Hint

Think about how loading less code upfront affects user experience.

Lazy loading delays loading feature modules until needed, reducing initial load time and improving perceived performance.

Practice

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

easy

A. To preload all modules at application start for faster navigation

B. To load modules only when the user navigates to their routes, improving startup speed

C. To bundle all modules into a single large file

D. To disable routing in the application

Solution

1. Step 1: Understand lazy loading concept

   Lazy loading means loading parts of the app only when needed, not all at once.

2. Step 2: Identify benefit in Angular context

   Loading modules on demand speeds up the initial app load and reduces bundle size.

3. Final Answer:

   To load modules only when the user navigates to their routes, improving startup speed -> Option B

4. Quick Check:

   Lazy loading = load on demand [OK]

Hint: Lazy loading delays module load until route is visited [OK]

Common Mistakes:

• Thinking lazy loading loads all modules upfront
• Confusing lazy loading with preloading
• Assuming lazy loading disables routing

2. Which of the following is the correct syntax to lazy load a module 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', loadModule: () => import('./admin/admin.module') }

Solution

1. Step 1: Recall Angular lazy loading syntax

   Angular uses dynamic import with loadChildren returning a promise resolving to the module.

2. Step 2: Match syntax to options

   { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) } uses the correct arrow function with dynamic 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 + loadChildren = { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) } [OK]

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

Common Mistakes:

• Using deprecated string syntax for loadChildren
• Confusing component with module in route config
• Using wrong property name like loadModule

3. Given this route configuration snippet, what happens when the user navigates to '/dashboard'?

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

medium

A. The DashboardModule is loaded immediately when the app starts

B. The app throws a runtime error due to incorrect syntax

C. The DashboardModule is never loaded

D. The DashboardModule is loaded only when the user navigates to '/dashboard'

Solution

1. Step 1: Analyze the route config with loadChildren

   The route uses lazy loading with a dynamic import function for DashboardModule.

2. Step 2: Understand lazy loading behavior on navigation

   The module loads only when the user visits '/dashboard', not before.

3. Final Answer:

   The DashboardModule is loaded only when the user navigates to '/dashboard' -> Option D

4. Quick Check:

   Lazy loading triggers on route visit [OK]

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

Common Mistakes:

• Assuming module loads at app start
• Confusing lazy loading with eager loading
• Thinking syntax causes runtime error

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

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

medium

A. The string syntax for loadChildren is deprecated and causes errors in Angular 17+

B. The path property should be named routePath

C. The module path should not include './' prefix

D. loadChildren should be replaced with loadModule

Solution

1. Step 1: Check loadChildren syntax

   The string syntax with '#' is deprecated in modern Angular versions (17+).

2. Step 2: Identify correct syntax

   Modern Angular requires dynamic import with arrow function for lazy loading.

3. Final Answer:

   The string syntax for loadChildren is deprecated and causes errors in Angular 17+ -> Option A

4. Quick Check:

   Deprecated string syntax = The string syntax for loadChildren is deprecated and causes errors in Angular 17+ [OK]

Hint: Use dynamic import syntax, not string with # [OK]

Common Mistakes:

• Using old string syntax for loadChildren
• Changing path property name incorrectly
• Replacing loadChildren with non-existent loadModule

5. You want to lazy load a feature module only if the user is authenticated. Which approach correctly combines lazy loading with route guarding in Angular?

hard

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

B. { path: 'settings', component: SettingsComponent, canActivate: [AuthGuard] }

C. { path: 'settings', loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule), canLoad: [AuthGuard] }

D. { path: 'settings', loadChildren: './settings/settings.module#SettingsModule', canLoad: [AuthGuard] }

Solution

1. Step 1: Understand lazy loading with guards

   To prevent loading a module unless authorized, use canLoad guard with lazy loading.

2. Step 2: Analyze options for correct guard usage

   { path: 'settings', loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule), canLoad: [AuthGuard] } uses canLoad with dynamic import syntax, which is correct for lazy loaded modules.

3. Step 3: Explain why others are incorrect

   { path: 'settings', component: SettingsComponent, canActivate: [AuthGuard] } is eager loading with canActivate. { path: 'settings', loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule), canActivate: [AuthGuard] } uses canActivate which guards route activation but not module loading. { path: 'settings', loadChildren: './settings/settings.module#SettingsModule', canLoad: [AuthGuard] } uses deprecated string syntax.

4. Final Answer:

   { path: 'settings', loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule), canLoad: [AuthGuard] } -> Option C

5. Quick Check:

   Lazy load + canLoad guard = { path: 'settings', loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule), canLoad: [AuthGuard] } [OK]

Hint: Use canLoad guard with lazy loaded modules to block loading [OK]

Common Mistakes:

• Using canActivate instead of canLoad for lazy loading
• Using deprecated string syntax for loadChildren
• Applying guards on components instead of modules