javascript - „Nu se poate citi proprietatea message din null” atunci când se citește codul de stare al erorii din răspunsul http în Angular 8

Dezvolt în Angular 8 și trimit o cerere HTTP POST către un API web .NET Core și returnez un cod de stare 400 dacă numele de utilizator sau parola sunt incorecte. Consola Chrome afișează că s-a returnat 400, dar atunci când extrag codul de stare din observable-ul returnat de răspunsul la cererea HTTP, primesc un mesaj de eroare Cannot read property message of null. Cum pot remedia asta? Mulțumesc.

Componentă de autentificare:

this.authService.login(
      {
        username: this.f.username.value,
        password: this.f.password.value
      }
    )
    .subscribe(
        res => {
          if(this.returnUrl != null){
            this.router.navigate([this.returnUrl]);
          }
          else {
            let role = res.role[0];
            this.router.navigate([`${role}`]);
          }

        },
        error => {
            //This line throws the error. the value of error is "cannot read message property of null" and error.status = undefined.
            alert(error.status);
            this.badCredentials = true;
            this.router.navigate(['/login']);
        });

Serviciu de autentificare:

login(user: {username: string, password: string}) :Observable<any>{
    return this.http.post<any>(`${applicationPaths.loginApiUrl}`, user)
    .pipe(
      tap(response => this.doLoginUser(response)),
      catchError((error): any => {

              return throwError(`Connection Error: ${error}`);
          }
      ));
  }

ACTUALIZARE:

Am actualizat codul în aplicația mea Angular la următorul și tot afișează aceeași eroare: Serverul a returnat codul: undefined, mesajul de eroare este: Nu se poate citi proprietatea 'message' a obiectului null

login(user: {username: string, password: string}) :Observable<any>{
    return this.http.post<any>(`${applicationPaths.loginApiUrl}`, user)
    .pipe(
      tap(response => this.doLoginUser(response)),
      catchError(this.handleError));
  }

  handleError(err: HttpErrorResponse) {
    let errorMessage = '';
    if(err.error instanceof ErrorEvent){

      //a client-side or network error occured. Handle it accordingly.
      errorMessage = `An error occured: ${err.error.message}`;

    } else {
      //The back-end returned an unsuccessful response code.
      errorMessage = `Server returned code: ${err.status}, error message is: ${err.message}`;
    }

    console.error(errorMessage);
    return throwError(errorMessage);
  }

Dar când fac return BadRequest("username sau parola incorectă."); sau return BadRequest();, returnează mesajul de eroare Server returned code: undefined, error message is: undefined. Deci poate că asta are legătură cu modul în care returnez codul de eroare din API-ul web în back-end. Nu sunt sigur ce trebuie corectat acolo.

Răspuns #1

starea este oferită doar dacă observe: 'response'

încearcă să editezi authService-ul tău așa

login(user: {username: string, password: string}) :Observable<any>{
    return this.http.post<any>(`${applicationPaths.loginApiUrl}`, user
      // NEW CODE HERE
      { observe: 'response' }
    )
    .pipe(
      tap(response => this.doLoginUser(response)),
      catchError((error): any => {

              return throwError(`Connection Error: ${error}`);
          }
      ));
  }

Răspunsul #2

Adaugă { observe: 'response' } în codul tău astfel

login(user: {username: string, password: string}) :Observable<any>{
    return this.http.post<any>(`${applicationPaths.loginApiUrl}`, user, { observe: 'response' })
    .pipe(
      tap(response => this.doLoginUser(response)),
      catchError((error): any => {
              return throwError(`Connection Error: ${error}`);
          }
      ));
  }

Apoi încearcă să accesezi datele despre eroare în catchError astfel

error.statusText
error.statusCode

Editați, ar trebui să folosiți acest cod în controlerul dumneavoastră

 return BadRequest();

Codul tău

return StatusCode(400);

returnează doar codul de stare