Angular - Performance Optimization
You want to lazy load a feature module only if the user is authenticated. Which approach correctly combines lazy loading with route guarding in Angular?
You want to lazy load a feature module only if the user is authenticated. Which approach correctly combines lazy loading with route guarding in Angular?
hard📝 Application Q15 of 15
Step-by-Step Solution
Solution:
Step 1: Understand lazy loading with guards
To prevent loading a module unless authorized, usecanLoadguard with lazy loading.Step 2: Analyze options for correct guard usage
{ path: 'settings', loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule), canLoad: [AuthGuard] } usescanLoadwith dynamic import syntax, which is correct for lazy loaded modules.Step 3: Explain why others are incorrect
{ path: 'settings', component: SettingsComponent, canActivate: [AuthGuard] } is eager loading withcanActivate. { path: 'settings', loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule), canActivate: [AuthGuard] } usescanActivatewhich guards route activation but not module loading. { path: 'settings', loadChildren: './settings/settings.module#SettingsModule', canLoad: [AuthGuard] } uses deprecated string syntax.Final Answer:
{ path: 'settings', loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule), canLoad: [AuthGuard] } -> Option CQuick Check:
Lazy load + canLoad guard = { path: 'settings', loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule), canLoad: [AuthGuard] } [OK]
Quick Trick: Use canLoad guard with lazy loaded modules to block loading [OK]
Common Mistakes:
- Using canActivate instead of canLoad for lazy loading
- Using deprecated string syntax for loadChildren
- Applying guards on components instead of modules
Master "Performance Optimization" in Angular
Want More Practice?
15+ quiz questions · All difficulty levels · Free
Free Signup - Practice All QuestionsMore Angular Quizzes