[Solved] Given this route config, what happens when navigating to '/dashboard'? { path: 'dashboard', loadComponent: () => import('./dashboard.component').then(m => m.DashboardComponent) } | Angular

Angular - Standalone Components

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

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

AThe DashboardComponent is loaded immediately when the app starts

BThe DashboardComponent is loaded only when '/dashboard' is visited

CThe DashboardComponent is never loaded

DThe app throws a runtime error due to missing component

Step-by-Step Solution

Solution:

Step 1: Understand loadComponent behavior
Using loadComponent with dynamic import delays loading the component until the route is accessed.
Step 2: Apply to '/dashboard' route
The DashboardComponent will load only when the user navigates to '/dashboard', not before.
Final Answer:
The DashboardComponent is loaded only when '/dashboard' is visited -> Option B
Quick Check:
loadComponent = lazy load on route visit [OK]

Quick Trick: loadComponent loads component on route visit only [OK]

Common Mistakes:

Master "Standalone Components" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

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