The preloading strategy in Angular is all about balancing efficient load times and user experience, enabling your app to load modules in the background, while users interact with the application.
For the Angular Lazy Loading Modules post, I explained how to lazy load modules in an Angular app. However, we found that sometimes it causes some issues when navigating. Using the preload strategy we can mitigate it.
The concept of preloading is rather simple. When you’re using lazy loading (loading modules only when they’re needed), there might be a delay in rendering some parts of the application, especially for larger modules. Preloading counters this by loading the rest of these modules in the background, after the app has loaded the initially necessary modules.
While users are busy interacting with the already loaded parts of your app, the remaining parts load quietly in the background, leading to an overall better user experience.
This is how you can configure preloading in your Angular app’s routing module, with the built-in PreloadAllModules strategy, that starts preloading all the modules right away, after the initial app load:
import { PreloadAllModules } from "@angular/router";
RouterModule.forRoot(routes, {
preloadingStrategy: PreloadAllModules,
});