Angular route data resolvers are hooks into the router's navigation event chain that help to provide data that is need starting from a parent route (inclusive) and down to all its child routes.
From the official Angular Router documentation, this is the order in which router events happen:
NavigationStart
: Navigation starts.
RouteConfigLoadStart
: Before the router lazy loads a route configuration.
RouteConfigLoadEnd
: After a route has been lazy loaded.
RoutesRecognized
: When the router parses the URL and the routes are recognized.
GuardsCheckStart
: When the router begins the guards phase of routing.
ChildActivationStart
: When the router begins activating a route's children.
ActivationStart
: When the router begins activating a route.
GuardsCheckEnd
: When the router finishes the guards phase of routing successfully.
ResolveStart
: When the router begins the resolve phase of routing.
ResolveEnd
: When the router finishes the resolve phase of routing successfuly.
ChildActivationEnd
: When the router finishes activating a route's children.
ActivationEnd
: When the router finishes activating a route.
NavigationEnd
: When navigation ends successfully.
NavigationCancel
: When navigation is canceled.
NavigationError
: When navigation fails due to an unexpected error.
Scroll
: When the user scrolls.
So why are resolvers needed?
Single Responsibility Principle (SRP) and DRY (Don't Repeat Yourself). Data fetching (and/or caching) is normally implemented in a service, while a resolver selects which data to provide from which service(s) and even if a resolver is synchronous, if the data is cached, the user won't notice a lag.
Example
Data can be fetched (resolved) once (and possibly cached), at the /items
route and be made available as part of the active route data snapshot for all child routes, like /items/:id
or /items/:id/edit
.
In this example, a list of items is fetched once and when the user needs to edit or view just one item, that item doesn't need to be fetched again because it's already available in the list fetched as part of the /items
parent route's resolvers.
Other concerns
To address everybody's concerns that you can't show the user that the app is waiting on some data to load before navigating to a new page, the solution is easy: just hook into the router's events, in your app component for example, and listen to ResolveStart
and ResolveEnd
events and show or hide a loading animation or loading overlay component or whatever you need to do to let the user know that data is being loading. With mobile apps for example, the pattern used is usually an overlay with a spinner in the center.
EDIT: I have since writing this, come to the conclusion that route resolvers are antipattern. You get much better user experience by navigating immediately to the route the user clicked for and displaying something sooner rather than after a delay, even if the UI will still have to load some data later, you can use a loading indicator in that case.
Observable
too so you can have a loading div showing while your resolver is getting the data.first
(you don't have to do that on HTTP calls as they're getting closed as soon as they've been received).