Angular Resolve Guard

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

Angular Resolve Guard

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

The Problem with the above approach is that, the use will see a empty component. The component shows the data after the arrival of the data. The one way is solve this problem is to show some loading indicator

The another way to solve this is to make use the Resolve Guard. The Resolve Guard pre fetches the data before the 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 a Observable<any>Promise<any> or just data. The interface signature of the Resolve interface is as 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 resolve property as shown in below.

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

In the example above products is 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 resolve property of the route. For each key value pair of resolvers, the angular calls the resolve method. If the return value of the resolver is a 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.

product.service.ts

product.ts

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 a two components to display the list of Products. The first component Product1Component does not use 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

product1.component.ts

Resolve Guard

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

product.service.ts

Product Component with resolver

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

product-list-resolver.service.ts

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.

product-resolver.service.ts

product2-detail.component.ts

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

app.module.ts

app.component.ts

app.component.html

app.routing.module.ts

contact.component.ts

home.components.ts

product.ts

product.service.ts

product-list-resolver.ts

product-resolver.service.ts

product1.component.ts

product1.component.html

product1-detail.component.ts

product1-detail.component.html

product2.component.ts

product2.component.html

product2-detail.component.ts

product2-detail.component.html

Leave a Comment

Your email address will not be published.

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

Scroll to Top