Lazy loading standalone components in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a lazy loaded standalone component is navigated to?

Consider an Angular app using standalone components with lazy loading via the router. What is the expected behavior when the user navigates to a route configured to lazy load a standalone component?

Angular

const routes = [
  { path: 'profile', loadComponent: () => import('./profile.component').then(m => m.ProfileComponent) }
];

A The ProfileComponent code is loaded only when the user navigates to '/profile', improving initial load time.

B The ProfileComponent is loaded immediately when the app starts, regardless of navigation.

C The ProfileComponent is never loaded unless manually imported elsewhere in the app.

D The router throws an error because standalone components cannot be lazy loaded.

💡 Hint

Think about how lazy loading defers loading code until needed.

Lazy loading with loadComponent loads the component code only when the route is activated, reducing initial bundle size.

📝 Syntax

intermediate

Identify the correct syntax to lazy load a standalone component in Angular routing

Which of the following route configurations correctly lazy loads a standalone component named DashboardComponent?

A { path: 'dashboard', loadComponent: () => import('./dashboard.component').then(m => m.DashboardComponent) }

B { path: 'dashboard', component: () => import('./dashboard.component').then(m => m.DashboardComponent) }

C { path: 'dashboard', loadChildren: () => import('./dashboard.component').then(m => m.DashboardComponent) }

D { path: 'dashboard', loadComponent: import('./dashboard.component').then(m => m.DashboardComponent) }

💡 Hint

Remember the property name used for lazy loading standalone components is loadComponent.

The loadComponent property expects a function returning a promise resolving to the component class.

🔧 Debug

advanced

Why does this lazy loading of a standalone component fail at runtime?

Given this route config, the app throws an error when navigating to '/settings'. What is the cause?

const routes = [
  { path: 'settings', loadComponent: () => import('./settings.component').then(m => m.SettingsModule) }
];

A The component file './settings.component' does not exist, causing a 404 error.

B The path 'settings' is reserved and cannot be used for lazy loading.

C The arrow function syntax is invalid and causes a syntax error.

D The import resolves to a module, but <code>loadComponent</code> expects a standalone component class, causing a runtime error.

💡 Hint

Check what is being imported and returned by the promise.

loadComponent must return a standalone component class, not a module. Returning a module causes Angular to fail loading the component.

❓ state_output

advanced

What is the effect on initial bundle size when using lazy loaded standalone components?

An Angular app uses lazy loading with standalone components for several feature routes. What is the expected effect on the initial JavaScript bundle size and app startup time?

A Initial bundle size is larger because lazy loading duplicates component code.

B Initial bundle size is smaller, so the app starts faster because feature components load only when needed.

C Initial bundle size is unchanged because standalone components are always bundled together.

D Initial bundle size is smaller, but app startup time is slower due to extra network requests.

💡 Hint

Think about how lazy loading affects what code is downloaded at startup.

Lazy loading defers loading feature components until navigation, reducing initial bundle size and improving startup speed.

🧠 Conceptual

expert

Which statement about lazy loading standalone components in Angular is true?

Choose the correct statement about lazy loading standalone components in Angular.

A Lazy loading standalone components is not supported; only modules can be lazy loaded.

B Standalone components must be eagerly loaded and cannot be lazy loaded.

C Standalone components can be lazy loaded directly using <code>loadComponent</code> without any NgModule.

D Lazy loading standalone components requires wrapping them in a module before routing can load them.

💡 Hint

Recall Angular's recent support for standalone components and routing.

Angular allows lazy loading standalone components directly via loadComponent without needing NgModules.