Usage of Resolvers in Angular 2.

Posted By :Ishaan Madan |30th June 2018


A common way to get and display the data from some API is routing a specific user to an angular component, and therafter calling a method present in service from the component’s  'ngOnInit' hook to fetch the necessary information. In this approach we often display some loading indicator till the response is arrived from the server.
However, there is another way called 'route resolver' which allows us to get the necessary data prior to navigation to a particular route. 

Tip- Resolvers should not be overused

We should load only the relevant data through resolvers to display the important sections of the page and rest of the data should be fetched asynchronously.


Resolver usage example in route config :

// main.ts

import { TransactionResolver } from './resolvers/transaction.resolver.ts';

export const routes: RouterConfig = [
    path: 'transactions/:id',
    component: TransactionComponent,
    resolve: {
      transaction: TransactionResolver

bootstrap(AppComponent, [
In the above example, we pass a 'TransactionResolver' class in the 'resolve' property of the route config object. Using this property Angular will run all the classes given inside the object, before loading the 'TransactionComponentcomponent given in the route.
Resolver Class Implementation
// transaction.resolver.ts

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Rx';
import { TransactionService } from '../services/transaction.service';

export class TransactionResolver implements Resolve {
    private transactionService: TransactionService
  ) {}

  resolve(route: ActivatedRouteSnapshot): Observable {
    return this.transactionService.getById(;
  • The exported class should be Injectable
  • The class should implements 'Resolve<any>' interface with one method 'resolve(): Observable<any>'

About Author

Ishaan Madan

Ishaan, a skilled technical project manager, excels at breaking down complex projects into manageable tasks. With a background in both technology and project management, he offers a unique perspective to every project he undertakes. His effective communication skills enable him to collaborate seamlessly with both technical and non-technical stakeholders, ensuring everyone is aligned towards shared objectives. He has hands-on experience in utilizing agile methodologies like Scrum and Kanban to drive project management and foster team collaboration. He leverages project management tools such as JIRA, Trello, and Clickup to monitor progress, manage tasks, and facilitate communication among team members and stakeholders. Moreover, his proficiency in full-stack development empowers him to comprehend the technical aspects of projects and provide guidance to developers when necessary. He demonstrates expertise in utilizing popular Python frameworks like Django and Flask, along with data analysis and manipulation libraries such as NumPy and Pandas. On the front-end, Ishaan adeptly employs JavaScript libraries like React and Angular to craft visually appealing and user-friendly interfaces. Additionally, he possesses proficiency in HTML, CSS, and JavaScript for designing responsive and mobile-friendly layouts.

Request For Proposal

[contact-form-7 404 "Not Found"]

Ready to innovate ? Let's get in touch

Chat With Us