[Solved] Given this route configuration:{ path: 'profile', loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule) }What happens when the user navigates to '/profile'? | Angular

Angular - Routing

Given this route configuration:

{ path: 'profile', loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule) }

What happens when the user navigates to '/profile'?

AThe router ignores the path and shows a blank page

BThe app throws an error because ProfileModule is not imported in AppModule

CThe ProfileModule is loaded immediately when the app starts

DThe ProfileModule is loaded asynchronously and its routes are activated

Step-by-Step Solution

Solution:

Step 1: Understand lazy loading behavior on navigation
When navigating to a lazy loaded route, Angular loads the module asynchronously at that moment.
Step 2: Apply to given route
Here, navigating to '/profile' triggers loading ProfileModule and activates its routes.
Final Answer:
The ProfileModule is loaded asynchronously and its routes are activated -> Option D
Quick Check:
Lazy load on navigation = A [OK]

Quick Trick: Lazy loaded modules load only on route visit [OK]

Common Mistakes:

MISTAKES

Master "Routing" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Given this route configuration: