Lazy loading modules with routes in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to lazy load the AdminModule in Angular routing.

Angular

const routes: Routes = [
  { path: 'admin', loadChildren: () => import('./admin/admin.module').[1] }
];

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

Afinally(m => m.AdminModule)

Bcatch(m => m.AdminModule)

Cthen(m => m.AdminModule)

Dload(m => m.AdminModule)

Attempts:

3 left

💡 Hint

Common Mistakes

Using catch() or finally() instead of then().

Trying to call load() which is not a function here.

Lazy loading uses import() with then() to load the module and return it.

2fill in blank

medium

Complete the code to define a route that lazy loads the UserModule.

Angular

const routes: Routes = [
  { path: 'user', [1]: () => import('./user/user.module').then(m => m.UserModule) }
];

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

Acomponent

BredirectTo

Cchildren

DloadChildren

Attempts:

3 left

💡 Hint

Common Mistakes

Using component instead of loadChildren.

Using redirectTo which is for redirects.

The loadChildren property is used to lazy load a module in Angular routes.

3fill in blank

hard

Fix the error in the lazy loading syntax for the AdminModule route.

Angular

const routes: Routes = [
  { path: 'admin', loadChildren: () => import('./admin/admin.module').[1] }
];

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

AAdminModule

Bthen(m => m.AdminModule)

Ccatch(m => m.AdminModule)

Dfinally(m => m.AdminModule)

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to access the module directly without then().

Using catch() or finally() incorrectly.

The import returns a promise, so you must use then() to access the module.

4fill in blank

hard

Fill both blanks to create a lazy loaded route for the SettingsModule with path 'settings'.

Angular

const routes: Routes = [
  { path: [1], loadChildren: () => import('./settings/settings.module').[2] }
];

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

A'settings'

Bthen(m => m.SettingsModule)

Ccatch(m => m.SettingsModule)

D'setting'

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong path string like 'setting'.

Using catch() instead of then().

The path should be the string 'settings' and lazy loading uses then(m => m.SettingsModule).

5fill in blank

hard

Fill all three blanks to define a lazy loaded route with path 'profile', loading ProfileModule, and adding a route guard 'AuthGuard'.

Angular

const routes: Routes = [
  { path: [1], loadChildren: () => import('./profile/profile.module').[2], canActivate: [[3]] }
];

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

A'profile'

Bthen(m => m.ProfileModule)

CAuthGuard

D'profiles'

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong path string like 'profiles'.

Forgetting to use then() after import.

Not adding the guard or misspelling it.

The path is 'profile', lazy loading uses then(m => m.ProfileModule), and the guard is AuthGuard.