Preloading strategies in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Angular's PreloadAllModules strategy behave?

Consider an Angular app using the PreloadAllModules strategy. What happens after the app's initial load?

A Lazy-loaded modules load only if the user clicks a preload button.

B Only the first lazy-loaded module is loaded after the app starts; others load on demand.

C No lazy-loaded modules load until the user navigates to their routes.

D All lazy-loaded modules start loading immediately after the app finishes initial rendering.

💡 Hint

Think about what 'preload all' means for modules that are lazy-loaded.

The PreloadAllModules strategy tells Angular to load all lazy-loaded modules in the background right after the app finishes loading. This improves navigation speed later because modules are ready.

❓ state_output

intermediate

What is the effect of NoPreloading strategy on lazy-loaded modules?

If an Angular app uses the NoPreloading strategy, when do lazy-loaded modules load?

A All lazy-loaded modules load immediately after app startup.

B Lazy-loaded modules load only when the user navigates to their routes.

C Lazy-loaded modules never load, causing navigation errors.

D Lazy-loaded modules load randomly at intervals.

💡 Hint

Consider the default behavior without preloading.

NoPreloading means Angular waits until the user tries to visit a lazy-loaded route before loading its module. This saves bandwidth but may cause a delay on first navigation.

📝 Syntax

advanced

Identify the correct way to enable PreloadAllModules in Angular Router

Which code snippet correctly sets the router to use PreloadAllModules?

A RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })

B RouterModule.forRoot(routes, { preloadingStrategy: 'PreloadAllModules' })

C RouterModule.forRoot(routes, { preloadStrategy: PreloadAllModules })

D RouterModule.forRoot(routes, { preloadingStrategy: new PreloadAllModules() })

💡 Hint

Check the exact property name and value type for preloadingStrategy.

The preloadingStrategy option expects the class PreloadAllModules without quotes or instantiation. Option A uses the correct syntax.

🔧 Debug

advanced

Why does a custom preloading strategy fail to preload modules?

A developer wrote a custom preloading strategy but finds no modules preload. What is a common mistake causing this?

Angular

import { Observable, of } from 'rxjs';
import { PreloadingStrategy, Route } from '@angular/router';

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

// In routing module:
RouterModule.forRoot(routes, { preloadingStrategy: CustomPreloadingStrategy })

A The preload method must return a Promise, not an Observable.

B The CustomPreloadingStrategy class must extend PreloadAllModules to work.

C The routes lack the 'data: { preload: true }' property to trigger preloading.

D The preloadingStrategy option must be a string, not a class.

💡 Hint

Check what the preload method checks in the route data.

The custom strategy checks for route.data['preload']. If routes don't have this property set to true, modules won't preload.

🧠 Conceptual

expert

Why choose a custom preloading strategy over built-in ones?

Which reason best explains why an Angular app might use a custom preloading strategy instead of NoPreloading or PreloadAllModules?

A To selectively preload only certain modules based on app logic or user roles.

B Because PreloadAllModules causes syntax errors in Angular 17+.

C To disable lazy loading entirely and load all modules eagerly.

D Because NoPreloading preloads all modules immediately, causing delays.

💡 Hint

Think about control and flexibility in loading modules.

Custom preloading strategies allow apps to decide which modules to preload based on conditions like user permissions or network speed, offering more control than the built-in options.