title: "Cannot read property message of null" when reading error status code from http response in Angular 8
body: <p>I'm developing in Angular 8 and issuing a http post request to a .net core web api and returning a 400 status code if username or password is incorrect. Chrome console says 400 returned but when extracting the status code in the returned observable from the http request response, I get a <code>Cannot read property message of null</code> error message. How can I fix this? Thanks.</p>
  
  <p><strong>Login Component:</strong></p>
  
  <pre><code>this.authService.login(
        {
          username: this.f.username.value,
          password: this.f.password.value
        }
      )
      .subscribe(
          res =&gt; {
            if(this.returnUrl != null){
              this.router.navigate([this.returnUrl]);
            }
            else {
              let role = res.role[0];
              this.router.navigate([`${role}`]);
            }
  
          },
          error =&gt; {
              //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']);
          });
  </code></pre>
  
  <p><strong>Auth Service:</strong></p>
  
  <pre><code>login(user: {username: string, password: string}) :Observable&lt;any&gt;{
      return this.http.post&lt;any&gt;(`${applicationPaths.loginApiUrl}`, user)
      .pipe(
        tap(response =&gt; this.doLoginUser(response)),
        catchError((error): any =&gt; {
  
                return throwError(`Connection Error: ${error}`);
            }
        ));
    }
  </code></pre>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I updated my code to the following in my angular application and it still returns the same error message: <code>Server returned code: undefined, error message is: Cannot read property 'message' of null</code></p>
  
  <pre><code>login(user: {username: string, password: string}) :Observable&lt;any&gt;{
      return this.http.post&lt;any&gt;(`${applicationPaths.loginApiUrl}`, user)
      .pipe(
        tap(response =&gt; 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);
    }
  </code></pre>
  
  <p>But when I do <code>return BadRequest("incorrect username or password.");</code> or <code>return BadRequest();</code> it returns the error message <code>Server returned code: undefined, error message is: undefined</code>. So maybe this has to do with the way I'm returning the error code from the web api in the back end. I'm not sure what needs to be fixed there.</p>