I'm trying to add some error handling to a service, following the Angular guide.
Relevant snippet:
private handleError (error: Response | any) {
// In a real world app, you might use a remote logging infrastructure
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || '';
const err = body.error || JSON.stringify(body);
errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
} else {
errMsg = error.message ? error.message : error.toString();
}
console.error(errMsg);
return Observable.throw(errMsg);
}
However, I'm getting a TypeScript error:
error TS2339: Property 'error' does not exist on type '"" | Promise<any>'.
Property 'error' does not exist on type '""'.
I can understand why it's happening-- error.json() returns a Promise<any> and then the subsequent line with body.error wouldn't work because there is no error property. However, it seems like it should expect a JSON object to be returned from .json(). Why is that, and what am I missing that the Angular guide isn't?
Same thing just happened to me. This happens when you fail to import the Response object.
import { Response } from '@angular/http';
No, it won't work because you wrote:
const body = error.json() || '';
Which means that body can be an empty string, and a string doesn't have the error property.
This should be better:
const body = error.json() || { error: null };
Oh, error.json() returns a Promise, which means that you won't be able to use this synchronous block, instead you'll need to:
error.json().then(body => {
if (!body) {
body = "";
}
const err = body.error || JSON.stringify(body);
const errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
});
I had the same issue, I finally found this solution.
.catch(error => {
let errMsg: string;
const body = JSON.parse(error._body);
if (body) {
errMsg = body.error
} else {
errMsg = error.message ? error.message : error.toString();
}
console.error(errMsg);
return Promise.reject(errMsg);
});