Lazy loading standalone components in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to lazy load a standalone component in Angular routing.

Angular

const routes = [{ path: 'dashboard', loadComponent: () => import('./dashboard.component').then(m => m.[1]) }];

Drag options to blanks, or click blank then click option'

ADashboardComponent

BDashboardModule

CDashboardService

DDashboardDirective

Attempts:

3 left

💡 Hint

Common Mistakes

Using a module name instead of the component class.

Trying to lazy load a service instead of a component.

The loadComponent function should return the standalone component class, here DashboardComponent.

2fill in blank

medium

Complete the code to define a route that lazy loads a standalone component with a path 'profile'.

Angular

const routes = [{ path: 'profile', loadComponent: () => import('./profile.component').then(m => m.[1]) }];

Drag options to blanks, or click blank then click option'

AProfileService

BProfileComponent

CProfileModule

DProfileDirective

Attempts:

3 left

💡 Hint

Common Mistakes

Using a module or service name instead of the component class.

Forgetting to use the arrow function for lazy loading.

The lazy loaded component must be the standalone component class, here ProfileComponent.

3fill in blank

hard

Fix the error in the lazy loading code by completing the blank.

Angular

const routes = [{ path: 'settings', loadComponent: () => import('./settings.component').then(m => m.[1]) }];

Drag options to blanks, or click blank then click option'

ASettingsDirective

BSettingsModule

CSettingsComponent

DSettingsService

Attempts:

3 left

💡 Hint

Common Mistakes

Using the module name instead of the component class.

Trying to lazy load a service or directive.

The lazy loading expects the standalone component class, which is SettingsComponent.

4fill in blank

hard

Fill both blanks to create a route that lazy loads a standalone component and sets a title.

Angular

const routes = [{ path: 'help', loadComponent: () => import('./help.component').then(m => m.[1]), data: { title: '[2]' } }];

Drag options to blanks, or click blank then click option'

AHelpComponent

BHelpModule

CHelp Page

DHelpService

Attempts:

3 left

💡 Hint

Common Mistakes

Using a module name instead of the component class.

Putting a component class name as the title string.

The loadComponent must be the standalone component class HelpComponent, and the title is a string like 'Help Page'.

5fill in blank

hard

Fill all three blanks to lazy load a standalone component, set a page title, and add a route guard.

Angular

const routes = [{ path: 'admin', loadComponent: () => import('./admin.component').then(m => m.[1]), data: { title: '[2]' }, canActivate: [[3]] }];

Drag options to blanks, or click blank then click option'

AAdminComponent

BAdminModule

CAdminGuard

DAdminService

Attempts:

3 left

💡 Hint

Common Mistakes

Using a module or service instead of the component class for lazy loading.

Using a component class as a guard.

Putting a guard class as the title string.

The lazy loaded component is AdminComponent, the title is a string like 'AdminModule' (used here as a title for variety), and the guard is AdminGuard to protect the route.