Angular 2 - Possible to subscribe to http errors in the 'calling' component?

Question

I'm having trouble retrieving the error from the service. My component is calling a service and I want to subscribe to any errors that might be returned. However, it seems like I'm not allowed to subscribe on the calling method.

public getMethods(v) {
    if(v != null) {
        return this._http.get('http:localhost/testservice', {
            method: 'GET',
            headers: new Headers([
                'Accept', 'application/json',
                'Content-Type', 'application/json'
            ])
        })
        .map(res => (res.json()))
        .map((method: any) => {
            if(method) {
                let result: Array<string> = [];
                var list = method.List;

                list.forEach(v => {
                    result.push(v);
                })
                return result;
            }
        })
        .subscribe(data => {
            this._dataStore.mn= data;
            this._mnObserver.next(this._dataStore.mn);
        },
        error => {
            **// I want to retrieve this error in the 'calling' component**
            return error;
        });
    }
    else {
        console.error("Get names. V was null");
    }

In the component: This does not work:

this._mnService.getMethods(v), error => {
      alert("error in da house");
};

This does not work:

this._mnService.getMethods(v).subscribe( error => {
      alert("error in da house");
});

So, what would work? Thanks! :)

Answer 1

You need to refactor a bit your method:

public getMethods(v) {
  if(v != null) {
    return this._http.get('http:localhost/testservice', {
        method: 'GET',
        headers: new Headers([
            'Accept', 'application/json',
            'Content-Type', 'application/json'
        ])
    })
    .map(res => (res.json()))
    .map((method: any) => {
        if(method) {
            let result: Array<string> = [];
            var list = method.List;

            list.forEach(v => {
                result.push(v);
            })
            return result;
        }
    });
  } else {
    console.error("Get names. V was null");
  }
}

This way you will receive the error when subscribing on the observable:

this._mnService.getMethods(v).subscribe((data) => {
  }, error => {
    alert("error in da house");
  });

What is a bit strange in your code is that you subscribe in the getMethods method. So you don't return an observable for the request but a subscription.

If you want to trigger the _mnObserver when the response is there, you could leverage the do operator instead. Here is a sample:

public getMethods(v) {
  if(v != null) {
    return this._http.get('http:localhost/testservice', {
        method: 'GET',
        headers: new Headers([
            'Accept', 'application/json',
            'Content-Type', 'application/json'
        ])
    })
    .map(res => (res.json()))
    .map((method: any) => {
        if(method) {
            let result: Array<string> = [];
            var list = method.List;

            list.forEach(v => {
                result.push(v);
            })
            return result;
        }
    })
    .do(data => { // <-------
      this._dataStore.mn= data;
      this._mnObserver.next(this._dataStore.mn);
    });
  } else {
    console.error("Get names. V was null");
  }
}