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.