How do I view the full error response in Angular?

I am trying to display more detailed error responses in my Angular app. It's running off of a .Net Core 8 backend.

I have the following code:

<...>.subscribe(
() => {
},
(err: HttpErrorResponse) => {
this.busy = false;
console.log(err);
console.log(typeof(err));
this.showErrorSheet('Error', '',
`While saving the user, the system encountered this error: ${JSON.stringify(err)}`);
}
);


When I run it with an intentional error (ex. a duplicate username) the err variable returns as a string reading

Http failure response for (url omitted): 400 OK
​

Meanwhile, the network tab in Chrome shows much more data. In addition to the 400 error code, the Response tab reads:

Username already in use
​

Which is the message I want to show.

On the .Net Core side, when the error is encountered, I am returning:

return BadRequest(errorMessage);


Where errorMessage is a string containing the error (in this case, "Username is already in use").

How can I show this message in Angular, so that I can display it to my users properly?

Continue reading...