Module lazy loading preview in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a lazy-loaded Angular module is navigated to?

Consider an Angular app with a lazy-loaded feature module. What is the expected behavior when the user navigates to the route linked to that lazy-loaded module?

A The module is loaded immediately when the app starts, but components render only on navigation.

B The module and its components are loaded only when the user navigates to its route, reducing initial bundle size.

C The module is never loaded unless manually imported in the root module.

D The module is loaded along with all other modules regardless of navigation.

💡 Hint

Think about how lazy loading helps with app performance by delaying loading until needed.

Lazy loading in Angular means the module is loaded only when its route is accessed, which helps reduce the initial load time of the app.

📝 Syntax

intermediate

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

Which option shows the correct way to configure lazy loading for a feature module named AdminModule located at ./admin/admin.module.ts 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', component: AdminModule }

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

💡 Hint

Modern Angular uses dynamic imports with loadChildren as a function.

The correct syntax uses a function returning a dynamic import promise with loadChildren. The string syntax (option A) is deprecated.

🔧 Debug

advanced

Why does lazy loading fail with this routing configuration?

Given this Angular route config snippet, why does lazy loading fail?

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

A The module file name is incorrect; it should be 'dashboard.module.tsx'.

B The path should be absolute, starting with a slash, like '/dashboard'.

C The string syntax for loadChildren is deprecated and no longer supported in Angular 17+, causing a runtime error.

D Lazy loading requires the module to be imported in the root module explicitly.

💡 Hint

Check Angular version and syntax changes for lazy loading.

Angular 17+ requires dynamic import syntax for lazy loading. The string syntax is deprecated and causes errors.

❓ state_output

advanced

What is the effect on initial bundle size when using lazy loading?

How does lazy loading a module affect the initial JavaScript bundle size of an Angular app?

A It duplicates the module code in both the main and lazy bundles, increasing size.

B It increases the initial bundle size because lazy modules are bundled together.

C It has no effect on bundle size; all modules are bundled together regardless.

D It reduces the initial bundle size by excluding the lazy-loaded module until needed.

💡 Hint

Think about how lazy loading delays loading code until navigation.

Lazy loading splits the app into smaller bundles, so the initial load excludes lazy modules, reducing size and improving load time.

🧠 Conceptual

expert

Which statement about Angular lazy loading and route guards is true?

Consider an Angular app using lazy loading and route guards. Which statement correctly describes their interaction?

A Route guards run before the lazy module loads, so they can prevent the module from loading if guard fails.

B Route guards on lazy-loaded routes run only after the module is loaded, so they cannot prevent module loading.

C Lazy loading disables route guards on the module's routes.

D Route guards must be declared inside the lazy-loaded module to work.

💡 Hint

Think about when route guards execute in relation to module loading.

Angular runs route guards before loading the lazy module, so guards can block navigation and prevent loading the module if conditions fail.

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