Angular14 min read

Preloading Lazy Routes (Better Perceived Performance)

Preload lazy-loaded routes after initial load so navigation feels instant later.

Noah Adams
September 14, 2025
5.2k124

Lazy loading makes initial load faster, but the first visit to a lazy route can feel slower. Preloading solves that by loading feature bundles in the background after the app starts.

## The idea

- App loads fast
- After the user lands, Angular quietly preloads feature routes
- Later navigation feels instant

## Enable preloading

```ts
import { provideRouter, withPreloading, PreloadAllModules } from '@angular/router';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes, withPreloading(PreloadAllModules)),
  ],
});
```

## When to use

- dashboards with many pages
- apps where users likely visit most routes
- when network is decent and you want smoother UX

## When not to use

- very large features rarely visited
- strict bandwidth environments (some mobile cases)

> Next: FormArrays and dynamic forms like “add more addresses.”
#Angular#Routing#Performance#Advanced