Detect http 404 responses from server in httpclient

Question

I'm having an issue detecting a 404 response status from an api. If you look at the image you'll see that chrome is correctly logging a 404 response status on the request. The issue is that angular's http client is reporting a status code of "0". What am I doing wrong here...?

code:

checkNameTaken(clientId: string, name: string): Observable<boolean> {
const baseUrl = this.configService.configBs.getValue().apiBaseUrl;
return this.http.get(`${baseUrl}/Rules/${clientId}/${name}`)
  .pipe(
    catchError( error => {
      if ( !(error.error instanceof ErrorEvent)) {
        // The backend returned an unsuccessful response code.
        // The response body may contain clues as to what went wrong,
        if (error.status === '404') {
          return of(true);
        }
        console.error(
          `Backend returned code ${error.status}, ` +
          `body was: ${error.error}`);
      }
      return of(false);
    }),
    map(rule => rule ? true : false)
  );

}

This is from chrome's network tab:

Request URL: http://localhost:57067/api/Rules/C7000050/tests
Request Method: GET
Status Code: 404 Not Found
Remote Address: [::1]:57067
Referrer Policy: no-referrer-when-downgrade

Any idea why error.status is always coming back 0 when server returns a 404? Running Angular 7.2.0

updated the code to this:

checkNameTaken(clientId: string, name: string): Observable<boolean> {
    const baseUrl = this.configService.configBs.getValue().apiBaseUrl;
    return this.http.get(`${baseUrl}/Rules/${clientId}/${name}`)
      .pipe(
        catchError( error => {
          if ( !(error.error instanceof ErrorEvent)) {
            // The backend returned an unsuccessful response code.
            // The response body may contain clues as to what went wrong,
            if (error.status === 404) {
              return of(true);
            }
            console.error(
              `Backend returned code ${error.status}, ` +
              `body was: ${error.error}`);
          }
          return of(false);
        }),
        map(rule => rule ? true : false)
      );
  }

error.status is still always 0 when the server returns a 404.

Answer 1

The status code is a number not string.

checkNameTaken(clientId: string, name: string): Observable<boolean> {
const baseUrl = this.configService.configBs.getValue().apiBaseUrl;
return this.http.get(`${baseUrl}/Rules/${clientId}/${name}`)
  .pipe(
    catchError( error => {
      if ( !(error.error instanceof ErrorEvent)) {
        // The backend returned an unsuccessful response code.
        // The response body may contain clues as to what went wrong,
        if (error.status === 404) {
          return of(true);
        }
        console.error(
          `Backend returned code ${error.status}, ` +
          `body was: ${error.error}`);
      }
      return of(false);
    }),
    map(rule => rule ? true : false)
  );
}

If thats not the case maybe it is an CORS issue as mentioned here: https://github.com/angular/angular/issues/20991