angular 2 - Injected service in http error handler

Question

I have a method handleError() like in the documentation https://angular.io/docs/ts/latest/guide/server-communication.html#!#error-handling

private handleError(error: any) {
    console.error(error);
    console.log(this.loginService); // <- always undefined
    return Observable.throw(error);
}

My problem is, that this.loginService is undefined although it has been injected in my class correctly. It is already used in other methods but seems not to be available in handleError.

Could the way the method is called by the http-catch be the problem? If so, how can i come around that? I need to execute some logic when handling an error.

This is an example on how i set handleError method as callback (exactly like documentation)

this.http.get(url,
              ApiRequest.ACCEPT_JSON)
              .map(ApiHelper.extractData)
              .catch(this.handleError);

Answer 1

Since you're passing the function directly, you don't have the this context of your class in there. A really easy and best practice way would be to use a lambda or "fat arrow function":

this.http.get(url, ApiRequest.ACCEPT_JSON)
    .map(res => ApiHelper.extractData(res))
    .catch(err => this.handleError(err));

---

A really good read on when to use lambdas: https://stackoverflow.com/a/23045200/1961059

Answer 2

this in handleError in your case is probably not what you think it is.

Try to do the following:

this.http.get(url,
              ApiRequest.ACCEPT_JSON)
              .map(ApiHelper.extractData) 
              .catch(this.handleError.bind(this)); // <-- add .bind(this)