Angular Resolve Guard

The Angular Resolve Guard or Angular Resolvers allow us to load data before we navigate to a Route. This article will show you what Angular Resolve guard is and how to use it in an Angular App.

Angular Resolve Guard

The Angular renders the Angular Component when we navigate to a route. The component will then send an HTTP request to the back-end server to fetch data to display it to the user. We generally do this in the ngOnInit Life cycle hook

The Problem with the above approach is that the user will see an empty component. The component shows the data after the arrival of the data. One way to solve this problem is to show some loading indicators.

Another way to solve this is to make use of the Resolve Guard. The Resolve Guard pre-fetches the data before navigating to the route. Hence the component is rendered along with the data.

How to Use Resolve Guard

First, we need to create a Angular Service, which implements the Resolve Interface

The service must implement the resolve method. A resolve method must return either an Observable<any>Promise<any>, or just data. The interface signature of the Resolve interface is shown below.

Inside the Resolve method, we will get the access to the ActivatedRouteSnapshot & RouterStateSnapshot, which can be used to get the values of router parameter, query parameters etc.

The following is the simple example of a Angular Resolver.

First, we import the Resolve from the @angular/router module.

We can make use of Angular Dependency Injection to inject the required services in the constructor.

The resolve method must return either an Observable<any>,  Promise<any>, or just data. In the example above, we are invoking the getProducts method of method of the productService, which returns an observable.

The router does not create the instance of the resolver. The job falls on the Angular dependency injection. Hence, we need it to register it in the Providers array of root module.

Once the resolver is created, we need to update the route definition and add the resolve property, as shown below.

The resolve property is a JavaScript object of key-value pair of resolvers. The key is a user-defined variable. The value must be a resolver service.

In the example above, products are the key, and ProductListResolveService is the resolver. The return value of the ProductListResolveService is assigned to the key, i.e., products, and made available to the component via route data

When the user navigates to the route product, the angular looks for the route's resolve property. The angular calls the resolve method for each key-value pair of resolvers. If the return value of the resolver is observable or a promise, the router will wait for that to complete. The returned value is assigned to the key products and added to the route data collection.

The component can just read the products from the route data from the ActivatedRoute as shown below.

Remember Resolve runs after all other guards are executed

Cancelling Navigation

If you return null from the resolver, the router will cancel the navigation

If the error is generated, then the router will cancel the navigation.

Multiple Resolvers

You can define more than one resolver

Resolve Guard Example

Let us build a simple app to demonstrate the use of Resolve guard.

Product Service

The following is the simple ProductService, which retrieves the hard coded products.

The getProducts() method returns the Observable of products using the RxJS operator of. We have included a delay of 1500 ms.

Similarly, the getProduct(id) returns the observable of Product after a delay of 1500 ms.

Product Component without resolver

Next, let us build two components to display the list of Products. The first component Product1Component does not use a resolver. The second component Product1Component makes use of the resolver.

This component, subscribes to the getProducts() method of the ProductService to get the list of Products

Resolve Guard

The ProductListResolverService service implements the Resolve Interface. It just returns the productService.getProducts().

Product Component with resolver

The following is the Product2Component does not use the ProductService, but gets the product list from the Route data.

In the app.routing.module, we need to add the resolve guard in the route definition

The register the ProductListResolverService in Providers array in AppModule

Finally, run the app

As you click on the Product1 link, you will see that the component gets loaded, but the data appears after a delay.

While you click on Product2 the component itself appears after some delay. That is because it waits for the resolver to finish. The Component renders along with the data.

ProductDetail Component

We can continue and create Product2DetailComponent and create a resolver, which if product not found redirects us to the Product2Component.

In the resolver service, we check to see if the product exists, if not we redirect the use the product list page and return null.

Complete Example

5 thoughts on “Angular Resolve Guard”

  1. Nagendra Kumar K V

    Wow what a wonderful explaination, it’s really good for who have to understand deep information about how to use and how Resolver is working in angular

    Thanks a lot who written this article 🙏

  2. Could it be that one pitfall of using resolvers is that it impacts the UX by not giving feedback while the data is being loaded? as you are not rendering the component while the resolver is active?

    1. Totally agree with you. User might think nothing is happening and they might make duplicate clicks or just move away from app!

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top