Deep dive: Angular Resolvers. Pre-fetching components data.

Route Guards: canActivate, canActivateChildren, canDeactivate & resolve. They are all vulnerable to pizza.
  • When you want to make sure that data from one or diferent sources is avaliable before the component loads.
  • When the data is critical for the component view.
“Is the font small or am I getting blind…?” Blank components may generate anxiety in aged users. 😜
  1. Create a resolver service.
The data service function fakes an API call with some delay.
Getting data from the component is now a piece of cake!
  1. Secures that required data is ready before component initialization.
  2. Provides you a custom fallback if the data can´t be accessed.
    While error interceptors may be a good general solution for managing API errors the resolvers can be a more specific solution.
  3. Reusability. The same resolver can be used to provide data to diferent components.
  4. Separation of concerns. By separating the sources of the data from the component, reducing the number of component dependencies.
    Does data comes from a state, a store, a mock, or diferent services ? Your component simply doesn´t know. It just connects with the ActivatedRoute and gets the data it needs from there. This can become specialy handy if you find yourself having smart components with many data providers, and the component is read-only.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Fer Ayguavives

Fer Ayguavives

Coffee lover. Psychologist. Nerdy Front-End Developer since the 56-Kbps days. Javascript & Angular enthusiast. | Writer at Angular Playground