TypeError: error.json is not a function

Question

Edit: Read the part at the end of the question!

I get this error:

My service code:

import { Http, Response, Headers } from \         


        

Answer 1

If it can help someone, I have got the same error when trying to parse API error response and notify the user.

When using the new HttpClient class, response.json() or error.json() are not needed. When used you will have that type of error :

Property 'json' does not exist on type 'HttpErrorResponse'

For example the service code above should look like:

import { HttpClient, HttpResponseBase, HttpErrorResponse } from '@angular/common/http';
import { Injectable } from "@angular/core";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { Observable } from "rxjs";

import { Client } from "./client.model";

@Injectable()
export class ClientService {
  private clients: Client[] = [];

  constructor(private http: Http){}

  addClient(client: Client) {
    this.clients.push(client);
    const body = JSON.stringify(client);
    const headers = new Headers({'Content-Type': 'application/json'});
    return this.http.post('http://localhost:3000/client', body, {headers: headers})
        .map((response: HttpResponseBase) => response)
        .catch((error: HttpErrorResponse ) => Observable.throw(error));
  }

  getClients() {
    return this.clients;
  }

  deleteClient(client: Client) {

  }
}

Answer 2

Dont call json() on response of type Response. In case you expect data back, for eg. Client just added, just do:

.map((data: any) => {
    return data._embedded.client as Client;
});

Answer 3

Well, like it states. The error returned from the observable does not contain the json method. This means that it is not of the type Response, but it just contains the error. You should just try to print out the object in your console and see what's in there:

.catch((error: any) => console.log(error))

You will probably find it's just an xmlhttpresponse object

Answer 4

Don't catch and rethrow. Just handle the exception when you consume the service.

 .map(response => response.json());

Or if you want to handle the exception in your service, and just return an error you can do the following

 .map(response => response.json())
            .catch(error => Observable.throw("Error in x service"));

You can see the documentation of Observable.throw and how it is used.

The error object you are getting is malformed. You can add some console logs to see what you are getting back. But it is causing issues.

Answer 5

Just Make Changes into your app.module.ts file

import { HttpModule} from "@angular/http";

@NgModule({

declarations: [

---- ],
imports: [ BrowserModule, HttpModule],

providers: [
    DataService
],   
bootstrap: [
   AppComponent
]})

This will fix your issue now in updated version of angular the methods are rewritten.