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

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a lazy loaded module route is accessed?

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

Angular

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

A The feature module is loaded immediately when the app starts, regardless of navigation.

B The feature module is loaded twice if the user navigates to '/feature' multiple times.

C The feature module is never loaded unless manually imported in AppModule.

D The feature module is loaded only when the user navigates to '/feature' for the first time.

💡 Hint

Lazy loading delays loading until the route is visited.

Lazy loading means the module is loaded only when its route is accessed for the first time. This improves startup time.

📝 Syntax

intermediate

Identify the correct syntax for lazy loading a module in Angular routes

Which option shows the correct way to lazy load a module named 'AdminModule' located at './admin/admin.module' in Angular routing?

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

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

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

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

💡 Hint

Use dynamic import with a promise and then() to specify the module.

Angular uses dynamic import syntax with a promise to lazy load modules. The path must be correct and the module class referenced in then().

🔧 Debug

advanced

Why does this lazy loaded module fail to load?

Given this route configuration, the lazy loaded module does not load and the app throws an error. What is the cause?

Angular

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

A The route path 'dashboard' must be an empty string for lazy loading to work.

B The module class name 'Dashboard' is incorrect; it should be 'DashboardModule'.

C Lazy loading requires the module to be imported in AppModule as well.

D The import path './dashboard/dashboard.module' is invalid and should include the file extension.

💡 Hint

Check the exported class name in the module file.

The error occurs because the module class name used in then() does not match the exported class name. It should be 'DashboardModule' if that is the class name.

❓ state_output

advanced

How many times is a lazy loaded module instantiated?

If a user navigates multiple times to a lazy loaded route in Angular, how many instances of the lazy loaded module are created?

A One instance is created and reused for all navigations to that route.

B A new instance is created every time the user navigates to the route.

C No instances are created; lazy loaded modules are only for code splitting.

D Two instances are created: one on first load and one on second navigation.

💡 Hint

Modules are loaded once and cached by Angular.

Angular loads the lazy loaded module once and reuses it for subsequent navigations, so only one instance exists.

🧠 Conceptual

expert

What is a key benefit of lazy loading modules in Angular apps?

Choose the best explanation for why developers use lazy loading for feature modules in Angular applications.

A It forces all modules to be bundled into a single large file for faster loading.

B It automatically preloads all modules in the background after app start.

C It reduces the initial app load time by loading feature modules only when needed.

D It disables route guards to improve navigation speed.

💡 Hint

Think about user experience on app startup.

Lazy loading improves startup performance by loading only the code needed initially, deferring other modules until required.

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