Preloading strategies in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to enable preloading of all lazy-loaded modules in Angular.

Angular

RouterModule.forRoot(routes, { preloadingStrategy: [1] })

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

AEagerLoading

BNoPreloading

CLazyLoadModules

DPreloadAllModules

Attempts:

3 left

💡 Hint

Common Mistakes

Using NoPreloading disables preloading.

LazyLoadModules is not a valid Angular preloading strategy.

The PreloadAllModules strategy tells Angular to preload all lazy-loaded modules after the app loads.

2fill in blank

medium

Complete the code to import the Angular preloading strategies module.

Angular

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

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

APreloadAllModules

BNoPreloading

CRouterModule

DPreloadingStrategy

Attempts:

3 left

💡 Hint

Common Mistakes

Importing RouterModule instead of PreloadAllModules.

Using NoPreloading when you want to preload.

You import PreloadAllModules from @angular/router to use it as a preloading strategy.

3fill in blank

hard

Fix the error in the code to correctly set the preloading strategy to no preloading.

Angular

RouterModule.forRoot(routes, { preloadingStrategy: [1] })

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

APreloadAllModules

BNoPreloading

CLazyLoadStrategy

DEagerLoad

Attempts:

3 left

💡 Hint

Common Mistakes

Using PreloadAllModules when you want no preloading.

Using invalid strategy names.

NoPreloading disables preloading of lazy-loaded modules.

4fill in blank

hard

Fill both blanks to create a custom preloading strategy class that implements Angular's PreloadingStrategy interface.

Angular

export class CustomPreloadingStrategy implements [1] {
  preload(route: Route, load: () => Observable<any>): Observable<any> {
    if (route.data && route.data.[2]) {
      return load();
    } else {
      return of(null);
    }
  }
}

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

APreloadingStrategy

BRouterModule

Cpreload

DpreloadRoute

Attempts:

3 left

💡 Hint

Common Mistakes

Using RouterModule instead of PreloadingStrategy.

Using wrong method names like preloadRoute.

The class must implement PreloadingStrategy and define the preload method.

5fill in blank

hard

Fill all three blanks to configure the router with a custom preloading strategy and enable preloading for routes with data property 'preload: true'.

Angular

RouterModule.forRoot(routes, { preloadingStrategy: [1] })

const routes: Routes = [
  {
    path: 'feature',
    loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule),
    data: { [2]: true }
  },
  {
    path: 'other',
    loadChildren: () => import('./other/other.module').then(m => m.OtherModule),
    data: { [3]: false }
  }
];

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

ACustomPreloadingStrategy

Bpreload

DNoPreloading

Attempts:

3 left

💡 Hint

Common Mistakes

Using NoPreloading disables all preloading.

Using different data property names than 'preload'.

Use CustomPreloadingStrategy as the preloading strategy. The routes use the preload data property to control preloading.