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.