Module lazy loading preview 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'

Athen(m => m.AdminModule)

Bcatch(m => m.AdminModule)

Cfinally(m => m.AdminModule)

Dload(m => m.AdminModule)

Attempts:

3 left

💡 Hint

Common Mistakes

Using catch instead of then causes errors.

Trying to call load which is not a function.

Use then(m => m.AdminModule) to load the module after import.

2fill in blank

medium

Complete the code to define a lazy loaded route for the UserModule.

Angular

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

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

Athen(m => m.UserModule)

BloadUserModule()

Ccatch(m => m.UserModule)

Dload(m => m.UserModule)

Attempts:

3 left

💡 Hint

Common Mistakes

Using a function call like loadUserModule() which is not valid here.

Using catch instead of then.

The then method accesses the exported module after dynamic import.

3fill in blank

hard

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

Angular

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

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

Athen(m => m.settingsmodule)

Bthen(m => m.settingsModule)

Cthen(m => m.Settingsmodule)

Dthen(m => m.SettingsModule)

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase or incorrect casing for the module name.

Misspelling the module name.

Module names are case sensitive and usually PascalCase, so SettingsModule is correct.

4fill in blank

hard

Fill both blanks to correctly lazy load the ReportsModule with a path 'reports'.

Angular

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

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

Areports

Breport

Cthen(m => m.ReportsModule)

Dthen(m => m.ReportModule)

Attempts:

3 left

💡 Hint

Common Mistakes

Using singular 'report' instead of 'reports' for the path.

Incorrect casing in the module name.

The path should be 'reports' and the module name ReportsModule with correct casing.

5fill in blank

hard

Fill all three blanks to lazy load the DashboardModule with path 'dashboard' and enable preloading strategy.

Angular

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

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

@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: [1] })],
  exports: [RouterModule]
})
export class AppRoutingModule {}

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

APreloadAllModules

Bdashboard

Cthen(m => m.DashboardModule)

DNoPreloading

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to import the preloading strategy.

Using wrong path or module name casing.

Not setting preloadingStrategy in forRoot.

Use PreloadAllModules to preload lazy modules, path is 'dashboard', and module name is DashboardModule.