Angulaire - res.json () n'est pas une fonction

Question

J'ai un problème avec mon service API. Ce service se connecte à mon API backend nodejs.

L'erreur dit

 ERROR TypeError: res.json is not a function
 

Je reçois cette erreur après avoir récemment mis à jour ce service pour utiliser HTTPClient au lieu de Http. Je reçois cette réponse car je manque l'ancien http avec le nouveau? si tel est le cas, existe-t-il une nouvelle réponse et comment l'utiliser?

 import { Injectable } from '@angular/core';
import { environment } from '../../environments/environment';
import { HttpHeaders, HttpClient, HttpParams } from '@angular/common/http';
import { Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

import { JwtService } from './jwt.service';

@Injectable()
export class ApiService {
  constructor(
    private http: HttpClient,
    private jwtService: JwtService
  ) {}

  private setHeaders(): HttpHeaders {
    const headersConfig = {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    };
    if (this.jwtService.getToken()) {
      headersConfig['Authorization'] = this.jwtService.getToken();
    }
    return new HttpHeaders(headersConfig);
  }

  private formatErrors(error: any) {
     return Observable.throw(error.json());
  }

  get(path: string, httpParams: HttpParams = new HttpParams()): Observable<any> {
    return this.http.get(`${environment.api_url}${path}`, { headers: this.setHeaders(), params: httpParams })
    .catch(this.formatErrors)
    .map((res: Response) => res.json());
  }

  put(path: string, body: Object = {}): Observable<any> {
    return this.http.put(
      `${environment.api_url}${path}`,
      JSON.stringify(body),
      { headers: this.setHeaders() }
    )
    .catch(this.formatErrors)
    .map((res: Response) => res.json());
  }

  post(path: string, body: Object = {}): Observable<any> {
    return this.http.post(
      `${environment.api_url}${path}`,
      body,
      { headers: this.setHeaders() }
    )
    .catch(this.formatErrors)
    .map((res: Response) => res.json());
  }

  delete(path): Observable<any> {
    return this.http.delete(
      `${environment.api_url}${path}`,
      { headers: this.setHeaders() }
    )
    .catch(this.formatErrors)
    .map((res: Response) => res.json());
  }
}
 

Answer 1

HttpClient.get() applique automatiquement res.json() et renvoie Observable<HttpResponse<string>> . Vous n'avez plus besoin d'appeler cette fonction vous-même.

Voir Différence entre HTTP et HTTPClient dans angular 4?

Answer 2

Vous pouvez supprimer la ligne entière ci-dessous:

  .map((res: Response) => res.json());
 

Pas besoin du tout d'utiliser la méthode de la carte.

Answer 3

Pas besoin d'utiliser cette méthode:

  .map((res: Response) => res.json() );
 

Utilisez simplement cette méthode simple au lieu de la méthode précédente. j'espère que vous obtiendrez votre résultat:

 .map(res => res );
 

Answer 4

Nous avons eu un problème similaire où nous voulions mettre à jour le module Http obsolète vers HttpClient dans Angular 7. Mais l'application est grande et doit changer res.json () à de nombreux endroits. J'ai donc fait cela pour avoir le nouveau module avec support arrière.

 return this.http.get(this.BASE_URL + url)
      .toPromise()
      .then(data=>{
        let res = {'results': JSON.stringify(data),
        'json': ()=>{return data;}
      };
       return res; 
      })
      .catch(error => {
        return Promise.reject(error);
      });
 

Ajout d'une fonction nommée "json" fictive à partir de l'emplacement central afin que tous les autres services puissent toujours s'exécuter avec succès avant de les mettre à jour pour s'adapter à une nouvelle façon de gérer les réponses, c'est-à-dire sans fonction "json".