J'avais un projet qui était auparavant sur Angular 5.x et je l'ai mis à jour en 7. Il y a une instance particulière où je dois renvoyer un observable httpClient mais je ne peux pas comprendre comment cela a changé dans Angular 7. Cela me donne un erreur sur le "catch" de la fonction callApi. [ts] La propriété 'catch' n'existe pas sur le type 'Observable'. [2339] est mon erreur

callApi(url: string): Observable<any> {

    return this.httpClient
        .get(url)
        .catch(this.handleError);
}

C'est tout le code de mon fichier config.service.ts.

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/forkJoin';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/throw';

import { environment } from './../environments/environment';

@Injectable()
export class ConfigService {

    private configUrl = environment.production ? './assets/config/config.prod.json' : './assets/config/config.dev.json';

    private _config: any;

    constructor(private httpClient: HttpClient) {
    }

    load(): Promise<any> {

        let promise: Promise<any> = new Promise((resolve: any) => {

            this.callApi(this.configUrl)
                .subscribe(config => {
                    this._config = config;
                    resolve(true)
                });
        });
        return promise;
    }

    getConfig(key: any) {
        return this._config[key];
    }

    private handleError(error: Response | any) {
        let errMsg: string;
        if (error instanceof Response) {
            let body = {}
            try {
                body = error.json();
            } catch (e) {
            }
            const err = body['error'] || JSON.stringify(body);
            errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
        } else {
            errMsg = error.message ? error.message : error.toString();
        }

        console.error(errMsg);

        return Observable.throw(errMsg);
    }

    callApi(url: string): Observable<any> {

        return this.httpClient
            .get(url)
            .catch(this.handleError);
    }
}
1
Keithers 20 nov. 2018 à 04:38

3 réponses

Meilleure réponse

Mettez à jour votre bibliothèque rxjs vers une version supérieure et modifiez le code suivant - Vous devez utiliser les opérateurs pipe de rxjs qui pourraient résoudre votre problème catchError() - modifiez votre catch comme catchError

Essayez quelque chose comme ça

callApi(url: string): Observable<any> {

    return this.httpClient
        .get(url).pipe(catchError(this.handleError));
}

J'espère que cela aide - Bon codage :)

4
Rahul 20 nov. 2018 à 01:50

Angular 6 est passé de RxJs 5 à RxJs 6 et il y a quelques changements de rupture.

Catch a été renommé catchError

https://www.academind.com/learn/javascript/rxjs-6-what-changed/

Il existe une bibliothèque de compatibilité que vous pouvez installer lors de la mise à niveau de RxJs 5 vers 6, mais il est préférable de modifier votre code pour qu'il soit compatible avec RxJs 6.

2
Adrian Brand 20 nov. 2018 à 03:11

En plus d'utiliser catchError plutôt que catch, car HttpClient renvoie un Observable, considérez qu'un abonnement à un Observable a 3 paramètres de rappel correspondant aux événements de succès, aux événements d'erreur, puis à un événement d'achèvement lorsque la connexion est terminée ce qu'elle faisait (vous pouvez vraiment ignorer celle-ci la plupart du temps). Ainsi, votre code pourrait ressembler à ceci:

Config.service.ts

callApi(url: string): Observable<any> {
    return this.httpClient
        .get(url)
        .pipe(catchError(this.handleError)); // adjust handleError function, as necessary
}

Some.component.ts

this.configService.callApi('https://google.com')
  .subscribe(
    goodResult => console.log(goodResult),
    error => console.log(error),
    () => console.log('the api call is done!')
  )
1
Ben Steward 20 nov. 2018 à 01:53