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.

Practice

1. What is the main benefit of lazy loading standalone components in Angular?

easy

A. It bundles all components into a single file

B. It automatically updates components without user action

C. It disables component rendering on mobile devices

D. It improves app speed by loading components only when needed

Solution

1. Step 1: Understand lazy loading purpose

   Lazy loading delays loading parts of the app until they are needed, reducing initial load time.

2. Step 2: Connect lazy loading to standalone components

   Standalone components can be lazy loaded to improve app speed by not loading them upfront.

3. Final Answer:

   It improves app speed by loading components only when needed -> Option D

4. Quick Check:

   Lazy loading = improves speed [OK]

Hint: Lazy loading means load only when needed [OK]

Common Mistakes:

• Thinking lazy loading bundles all components together
• Confusing lazy loading with automatic updates
• Believing lazy loading disables components on devices

2. Which syntax correctly lazy loads a standalone component in Angular routing?

easy

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

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

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

D. { path: 'home', loadModule: () => import('./home.component').then(m => m.HomeComponent) }

Solution

1. Step 1: Identify correct property for lazy loading standalone components

   Angular uses loadComponent to lazy load standalone components in routes.

2. Step 2: Check syntax correctness

   { path: 'home', loadComponent: () => import('./home.component').then(m => m.HomeComponent) } uses loadComponent with dynamic import and then returns the component class, which is correct.

3. Final Answer:

   { path: 'home', loadComponent: () => import('./home.component').then(m => m.HomeComponent) } -> Option A

4. Quick Check:

   Lazy load standalone = loadComponent [OK]

Hint: Use loadComponent with dynamic import for standalone lazy loading [OK]

Common Mistakes:

• Using component property instead of loadComponent
• Using loadChildren for components instead of modules
• Using non-existent loadModule property

3. Given this route config, what happens when navigating to '/dashboard'?

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

medium

A. The DashboardComponent is loaded immediately when the app starts

B. The DashboardComponent is loaded only when '/dashboard' is visited

C. The DashboardComponent is never loaded

D. The app throws a runtime error due to missing component

Solution

1. Step 1: Understand loadComponent behavior

   Using loadComponent with dynamic import delays loading the component until the route is accessed.

2. Step 2: Apply to '/dashboard' route

   The DashboardComponent will load only when the user navigates to '/dashboard', not before.

3. Final Answer:

   The DashboardComponent is loaded only when '/dashboard' is visited -> Option B

4. Quick Check:

   loadComponent = lazy load on route visit [OK]

Hint: loadComponent loads component on route visit only [OK]

Common Mistakes:

• Assuming component loads at app start
• Thinking component never loads
• Expecting runtime error without import

4. Identify the error in this route config for lazy loading a standalone component:

{ path: 'profile', loadComponent: import('./profile.component').then(m => m.ProfileComponent) }

medium

A. Missing arrow function wrapping the import call

B. Using loadComponent instead of component property

C. Incorrect path string format

D. Missing import statement at the top of the file

Solution

1. Step 1: Check loadComponent syntax

   The loadComponent property must be a function returning a Promise, so it needs an arrow function wrapping the import.

2. Step 2: Identify missing arrow function

   The code calls import directly without wrapping in a function, causing the component to load eagerly or a runtime error when the router tries to invoke it.

3. Final Answer:

   Missing arrow function wrapping the import call -> Option A

4. Quick Check:

   loadComponent requires () => import(...) [OK]

Hint: Wrap import in arrow function for loadComponent [OK]

Common Mistakes:

• Calling import directly without function
• Confusing loadComponent with component property
• Thinking import must be at file top

5. You want to lazy load two standalone components, AdminComponent and UserComponent, under routes '/admin' and '/user'. Which is the best way to configure the routes to optimize initial load time?

hard

A. Import both components eagerly and assign them to routes directly

B. Use loadChildren to lazy load a module containing both components

C. Use loadComponent with dynamic imports for both routes separately

D. Combine both components into one and lazy load that single component

Solution

1. Step 1: Understand lazy loading standalone components

   Using loadComponent with dynamic imports allows each component to load only when its route is visited, reducing initial load.

2. Step 2: Compare options for multiple components

   Use loadComponent with dynamic imports for both routes separately loads each component lazily and separately, optimizing load time better than eager loading or bundling.

3. Final Answer:

   Use loadComponent with dynamic imports for both routes separately -> Option C

4. Quick Check:

   Separate loadComponent calls = best lazy loading [OK]

Hint: Lazy load each standalone component separately with loadComponent [OK]

Common Mistakes:

• Eagerly importing components defeats lazy loading
• Using loadChildren for standalone components unnecessarily
• Combining components increases initial load size