Angular 2+ resolve route data

Question

I want to return data from API in angular route resolver but if there is any error in API data due to stale token I would refresh the token again and hit the same API.Below is the code for it

import { CommonUtlitiesService } from './../services/commonutilities.service';
import { UserService } from './../services/user.service';
import { Injectable } from '@angular/core';

import { Resolve } from '@angular/router';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/delay';

@Injectable()
export class CurrentUserProfileResolver implements Resolve<any> {
  constructor(private userservice:UserService,
  private commonservice:CommonUtlitiesService) {}

  resolve() {
    return  this.getactiveuserinfo();

  }

  getactiveuserinfo(maxcount=3){

  //get user data
  this.userservice.getactiveuseraccountData().subscribe(res => {
        console.log(res);
        return res;
    },
      (err) => {
         //refresh stale token
        this.commonservice.refreshToken().subscribe(res => {
          maxcount--;
          if (maxcount > 0) {
            //again hit The API
            this.getactiveuserinfo(maxcount - 1);
          }
        });

      });

  }
}

The service code for userservice is as below:

getactiveuseraccountData(){

    return this.http.post(url, dataSend, options)
      .map(res => res.json());
  }

In my component I get data as:

 let data= this.route.snapshot.data.userdata;

but this does not contain any API response.

If I change my code in resolver to direct hit the service it works fine. For example:

import { CommonUtlitiesService } from './../services/commonutilities.service';
import { UserService } from './../services/user.service';
import { Injectable } from '@angular/core';

import { Resolve } from '@angular/router';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/delay';

@Injectable()
export class CurrentUserProfileResolver implements Resolve<any> {
  constructor(private userservice:UserService,
  private commonservice:CommonUtlitiesService) {}

  resolve() {
//this works fine
    return  userservice.getactiveuseraccountData()

  }

help me figure out the issue

@happyZZR1400 the console message has a proper API response but it is called after my component's resolver data is loaded. — jalak vora, Mar 04 '18 at 12:53
ok, if then - i guess your problem is that the resolver expects to get the observable which not fired in case of error. i guess you need to wrap all your logic with "new observable()" and call "next" instead of returning "res" — happyZZR1400, Mar 04 '18 at 13:04

score 0 · Answer 1 · answered Mar 04 '18 at 13:13

try to wrap all the logic of getactiveuserinfo method with observable:

getactiveuserinfo(maxcount=3){
    return new  Observable((observer) => {
            //get user data
             this.userservice.getactiveuseraccountData().subscribe(res => {
                console.log(res);
                // return res;
                observer.next(res);
              },
              (err) => {
                 //refresh stale token
                this.commonservice.refreshToken().subscribe(res => {
                  maxcount--;
                  if (maxcount > 0) {
                    //again hit The API
                    this.getactiveuserinfo(maxcount - 1);
                  }
                });

              });

      })   
  }

Hope that helps

Angular 2+ resolve route data

1 Answers1