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.