Angular router supports various preloading strategies. The aim of preloading is to balance app performance and user experience while navigating. The idea is to load specific parts of the app in the background, so users don’t experience delays when they visit different pages or sections.
How Preloading Works in Angular
Preloading kicks in after your app loads and takes care of lazy-loaded modules ahead of time. Instead of waiting until a user clicks a link, Angular quietly fetches these modules in the background. So when the user eventually navigates to that route, the content shows up instantly without loading delay, and waiting.
Built-in Preloading Strategies
Angular provides two built-in preloading strategies:
- PreloadAllModules: Preloads all lazy-loaded modules.
- NoPreloading: (Default) Does not preload any modules.
Custom Strategies
If you want more control, you can hire Angular developers to build your own strategy. With this, you can set up all the user roles, network conditions, and device type, as you prefer.
Conclusion
Preloading strategies are a simple yet effective method to make Angular apps feel faster without bloating the initial bundle. For projects with many routes or complex modules, it’s worth exploring custom strategies to get the most out of your architecture.
