Resolve in Angular Routing

Resolve is Interface that classes can implement to be a data provider. A data provider class can be used with the router to resolve data during navigation. The interface defines a resolve() method that will be invoked when the navigation starts. The router will then wait for the data to be resolved before the route is finally activated. Getting data before navigating to the new route.

Resolver is a service which has to be [provided] in root module.

interface Resolve<T> {
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<T> | Promise<T> | T
}

Why to use Resolve

To ensure data obtained => routing works, prevent empty component display due to data delayed, to enhance better UI experience
To routing interception, e.g. some website, if the user is not logged in, then when opening some pages, it will warn: not logged in, then force user to jump back to the last page. But if it is used with resolve, then it could pre-judge the login status before openning the new page.

Difference between a Resolver and normal process

1. General Routing Flow.

User clicks the link.
Angular loads the respective component.

2. Routing Flow with Resolver

1. User clicks the link. = = =
1. Angular executes certain code and returns a value or observable.
1. You can collect the returned value or observable in constructor or in ngOnInit, in class of your component which is about to load.
1. Use the collected the data for your purpose. = = =
1. Now you can load your component.

Steps 2,3 and 4 are done with a code called Resolver.

How does a Resolve work

1. Creating a Resolver.

Create a service.
Import “Resolve” interface from ‘@angular/router’.
Implement the interface with your class
Override resolve() method.
Resolve method should have two parameters. One is routesnapshot and other one is statesnapshot. Check the interface definition above.
Resolve method should return a value or observable, if you want to use it later in your loaded component class.

1st requirement to implement the Angular router’s Resolve interface is that the export class has a resolve method. Whatever is returned from that method will be the resolved data.

@Injectable()
export class SampleClassResolve implements Resolve<Observable<string>> {
  constructor() {}

  resolve() {
    return Observable.of('Hello Sample!').delay(2000);
  }
}

2. Defining a Resolver in Route

then should be the setting up inside routing of app.module.ts .This resolve key holds another object where you will define a key and assign your resolver service as a value to it.

const routes: Routes = [
  {
    path:'sample',
    component:'SampleNavComponent',
    resolve: { message: SampleClassResolver }
  }
]

//message is the key which i have defined and it holds SampleClassResolve service

@NgModules
providers: [
    SampleClassResolver
  ]

Logic

Therefore the browser will follow this logic, parent.component => SampleClassResolver =>SampleNavComponent Therefore the browser will obtain data before reach SampleNavComponent

3.Using Resolver

3rd step is to access the resolve inside a component.Then we can access the resolved data using the data property of ActivatedRoute’s snapshot object:

data: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.data = this.route.snapshot.data;
  }

then inside the template, the message key will be used

<p>The message: {{data.message}}</p>

[Source:]

Angular Router: Route Resolvers Angular Resolve Understanding Resolvers in Angular

puddlejumper26 / blogs