hardFrontend

What are preloading strategies?

Q: What are preloading strategies?

**Core concept.** Preloading controls **when lazy-loaded routes are fetched in the background** after the app starts. The default NoPreloading loads a feature only on navigation; PreloadAllModules eagerly downloads all lazy chunks once the app is idle; a **custom** strategy preloads only selected routes. It balances a small initial bundle against fast later navigation. NoPreloading load on navigation PreloadAllModules load all when idle<

291 views

Understand the problem

Explain route preloading.

routingpreloading

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Enable preloading + a custom strategy

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

// option A: preload everything when idle
//   provideRouter(routes, withPreloading(PreloadAllModules))

// option B: custom — only routes flagged data:{ preload: true }
export class SelectivePreload implements PreloadingStrategy {
  preload(route: Route, load: () => Observable<any>): Observable<any> {
    return route.data?.['preload'] ? load() : of(null);
  }
}
//   { path: 'admin', loadComponent: ..., data: { preload: true } }

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How do you implement custom routing strategies by extending RouteReuseStrategy?

What is the critical render path and how does Angular handle font and style optimization?