Angular 2 how to read custom error message from backend

Question

My problem with Angular 2, which did not exist in AngularJS, was that I sent an error message as a string with an API callback in case I have an error, with an example error 401, for example, the problem now that I can Don't read this message from Angular2 http response message while I can do this from AngularJS:

I tried the following codes and nothing helped:

Promise:

this._http.post('/login',{email: ' [e-mail] ', password: '123'}) .toPromise() .then((resp) => console.log(resp), (error) => console.log(error)); 

Observed:

 this._http.post('/login',{email: ' [e-mail] ', password: '123'}) .subscribe(response =>console.log(response), (error) => console.log(error)); 

And from the back-end I send the response as text, for OK or Unauthorized, for OK I send back String token == UUID.randomUUID().toString(); , for an error I send the message back, for example String error = " Invalid credentials "; , the problem is that console.log works and print the text for success (token in this case), but in case of an error it just prints: Response with status: 200 for URL: null .

If I change the code to JSON.stringify(error) , I will get something like this:

 {"_body":{},"status":401,"ok":false,"statusText":"Unauthorized","headers":{"null":["HTTP/1.1 401 Unauthorized"],"Access-Control-Allow-Headers":["Origin"," X-Requested-With"," Content-Type"," Accept"," Referer"," User-Agent"],"Access-Control-Allow-Met hods":["POST"," GET"," PUT"," DELETE"," OPTIONS"],"Access-Control-Allow-Origin":["*"],"Allow":["*"],"Content-Length":["36"],"Content-Type":["text/plain; charset=utf-8"],"Date":["Tue"," 23 Aug 2016 14:53:25 GMT"]},"type":2,"url":null} 

As you can see the error test, not even mentioned inside the object!

I tried changing the error response from backend to return json like this:

 { "message": "invalid email or password" } 

I can get the result inside _body , and I can only read it like this: console.log(error._body.message) ! but I feel that this is something wrong and I don't want to respond like json in this case.

For angularjs (angular 1), it is so simple to print the answer, and everything is cool, while in Angular 2 it is really a problem.

What is the problem and how can I solve this problem without any refactoring for the backend?

Edit:

I am using Angular 2.0.0-rc.4 and the same for http: `" @ angular / http ":" 2.0.0-rc.4 "

Answer 1

Mothanfar In my case, I work with Asp Web Api as the back end, this thing makes me crazy, the only solution I found is transforming into json and reading the message, I know it is really ugly, but it works for me. Best wishes.

 CheckError(error: any) { let servermsg: any = JSON.parse(error._body)["ModelState"]["Login"][0]; if (servermsg) { this.showMsg = true; this.msg = servermsg; } } 

Answer 2

If you are returning a JSON object from the server, you can use the following code on the client side:

 let errMsg: ErrorMessage = err.json(); console.log(errMsg.message) export class ErrorMessage { message:string; }