Angular14 min read

Preloading Lazy Routes (Better Perceived Performance)

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

Noah Adams
December 21, 2025
0.0k0

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