0–100 in Angular: Part 6
In our last part of this series, we learned some beneficial things in Angular which include: Making Calls, feature modules, etc. See article here.
In today’s series, we would be diving into resolvers. If you recall vividly, you would remember that sometimes Angular routes faster than we can get data from our server thus giving us an error saying data is undefined. There is excellent news, Angular has a way to solve that problem and it uses resolvers.
Resolvers: Resolvers are a way to suspend the component from loading until the necessary data is sent over to the client. It makes use of the Angular activated route.
Let’s see how it works

Unfortunately, Angular doesn’t generate the resolver file for us, we would have to do that manually.
From our previous series code base, create a data.ressolvers.ts file the src/app/user directory and add the following piece of code there:
import { Injectable } from '@angular/core';import { empty} from 'rxjs'import { Resolve } from '@angular/router';import { catchError } from 'rxjs/operators';import { ActivatedRouteSnapshot } from '@angular/router';import {UserService} from './user.service'
@Injectable()export class GetUsers implements Resolve<any> {constructor(private data:UserService) {}resolve(){return this.data.getUser().pipe(catchError((err)=>{return empty();}))}}
This simply creates a new class GetUsers that implements Resolve. Notice we also import UserService and returned the value we get from it. If there is an error, it would not return any component. Next step, we have to tell our module that this resolver exists.
Import the resolver class in the module and add it to your providers.
import {GetUsers} from './data.resolvers'providers: [GetUsers]
Finally, we add it to our routing to make sure the conditions of the resolvers are met before routing takes place. Import it to your user routing file and modify the route where you get the list of users as such:
import {GetUsers} from './data.resolvers'{path:'user',component:UserComponent,resolve:{userInfo:GetUsers}}
This would resolve the list of users in this route with the snapshot userInfo. Let’s now see how we retrieve this data in our component.
In our user component where we got the list of all the users, go ahead and add the following piece of code:
import { ActivatedRoute } from '@angular/router';constructor(private router:ActivatedRoute) { }
list:anyngOnInit() {this.list=this.router.snapshot.data['userInfo']}
Notice here that we didn’t have to subscribe to our service on init, we just get the data from the activated route snapshot.
Let’s now implement resolvers for getting user by id.
As before go to your resolver file and add the following piece of code:
@Injectable()export class GetUserId implements Resolve<any> {constructor(private data:UserService) {}resolve(route: ActivatedRouteSnapshot){return this.data.getProfile(route.paramMap.get('id')).pipe(catchError((err)=>{return empty();}))}}
Notice this is slightly different from the resolver class earlier because in this case, we have to use the id param from the route to make an API call. So we get the id using route.paramMap.get(‘id’) and pass it into the method.
Go ahead and update your module file and profile routing and profile component following the above example.
If all goes correctly, you would notice that you no longer the undefined error when you click the user profile.
And that’s how resolvers work in Angular folks.

