Lazy loading routes and modules 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'

Aload(m => m.AdminModule)

Bthen(m => m.AdminModule)

Cfinally(m => m.AdminModule)

Dcatch(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.

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

2fill in blank

medium

Complete the code to define a lazy loaded route for 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'

AloadChildren

Bcomponent

CredirectTo

Dchildren

Attempts:

3 left

💡 Hint

Common Mistakes

Using component instead of loadChildren.

Using children without lazy loading.

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

3fill in blank

hard

Fix the error in the lazy loading syntax for the DashboardModule.

Angular

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

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

Athen(m => m.Dashboardmodule)

Bthen(m => m.dashboardModule)

CDashboardModule

Dthen(m => m.DashboardModule)

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong casing like dashboardModule or Dashboardmodule.

Omitting then.

The correct syntax uses then(m => m.DashboardModule) with exact casing.

4fill in blank

hard

Fill both blanks to create a lazy loaded route with a preloading strategy.

Angular

import { RouterModule, Routes, [1] } from '@angular/router';

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

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

APreloadAllModules

Bthen(m => m.SettingsModule)

CNoPreloading

DloadChildren

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing preloading strategy names.

Wrong import names or missing then.

Use PreloadAllModules to preload lazy modules and then(m => m.SettingsModule) to load the module.

5fill in blank

hard

Fill all three blanks to configure lazy loading with a preloading strategy and a route guard.

Angular

import { RouterModule, Routes, [1] } from '@angular/router';
import { AuthGuard } from './guards/auth.guard';

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

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

APreloadAllModules

Bthen(m => m.ProfileModule)

CAuthGuard

DNoPreloading

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to import preloading strategy.

Using wrong guard name or missing canLoad.

Import PreloadAllModules for preloading, use then(m => m.ProfileModule) to lazy load, and protect route with AuthGuard.