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);

Yep. I am already using it in other methods in the same class. — Philipp
– Philipp, Commented Jun 23, 2016 at 10:53

Community · Accepted Answer · 2017-05-23 11:46:44Z

21

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

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Jun 23, 2016 at 11:57

Maximilian Riegler

23.6k4 gold badges65 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Wojciech Kwiatek · Accepted Answer · 2016-06-23 11:54:31Z

5

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)

answered Jun 23, 2016 at 11:54

Wojciech Kwiatek

6,8222 gold badges18 silver badges26 bronze badges

Comments

Marko · Accepted Answer · 2020-09-30 08:55:10Z

0

Possible solution is also to assign your service to static variable of class

ClassToHandleError {
   private static loginService: LoginService;

   constructor(private loginService: LoginService) {
      ClassToHandleError.loginService = loginService;
   }

   private handleError(error: any) {
    console.error(error);
    console.log(ClassToHandleError.loginService); // here you can use static reference
    return Observable.throw(error);
   }
}

I know this is just workaround and rinukkusu provided definetely better solution then me. I used it until I get through this question. But maybe in some special case this will be valuable for somebody :) .

answered Sep 30, 2020 at 8:55

Marko

3182 silver badges9 bronze badges

Collectives™ on Stack Overflow

angular 2 - Injected service in http error handler

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related