How do you correctly configure Angular routing to lazy load a standalone component named ProfileComponent?

easy📝 Syntax Q3 of 15

Angular - Standalone Components

How do you correctly configure Angular routing to lazy load a standalone component named ProfileComponent?

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

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

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

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

Step-by-Step Solution

Solution:

Step 1: Use loadComponent property
Lazy loading standalone components requires the loadComponent function.
Step 2: Use dynamic import syntax
The import must be a function returning a promise: () => import(...).
Final Answer:
{ path: 'profile', loadComponent: () => import('./profile.component').then(m => m.ProfileComponent) } -> Option C
Quick Check:
loadComponent with arrow function and dynamic import is correct [OK]

Quick Trick: Use loadComponent with arrow function and dynamic import [OK]

Common Mistakes:

Master "Standalone Components" in Angular

9 interactive learning modes - each teaches the same concept differently

Want More Practice?

15+ quiz questions · All difficulty levels · Free

More Angular Quizzes