[Solved] Which of the following is the correct syntax to lazy load a module in Angular routing? — Ans: { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m =>... | Angular

Angular - Performance Optimization

Which of the following is the correct syntax to lazy load a module in Angular routing?

A{ path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }

B{ path: 'admin', loadChildren: './admin/admin.module#AdminModule' }

C{ path: 'admin', component: AdminModule }

D{ path: 'admin', loadModule: () => import('./admin/admin.module') }

Step-by-Step Solution

Solution:

Step 1: Recall Angular lazy loading syntax
Angular uses dynamic import with loadChildren returning a promise resolving to the module.
Step 2: Match syntax to options
{ path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) } uses the correct arrow function with dynamic import and then to get the module class.
Final Answer:
{ path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) } -> Option A
Quick Check:
Dynamic import + loadChildren = { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) } [OK]

Quick Trick: Use arrow function with import().then() for lazy loading [OK]

Common Mistakes:

Master "Performance Optimization" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Which of the following is the correct syntax to lazy load a module in Angular routing?