Nsryjdtyk

I had a project that was previously on Angular 5.x and I updated it to 7. There is a particular instance where I need to return an httpClient observable but I can't figure out how it changed in Angular 7. It's giving me an error on the "catch" of the callApi function. [ts] Property 'catch' does not exist on type 'Observable'. [2339] is my error

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



    return this.httpClient

        .get(url)

        .catch(this.handleError);

}

This is all of the code in my config.service.ts file.

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);

    }

}

Update your rxjs library to higher version and change the following code - You need use pipe operators from rxjs that might solve your catchError() issue - change your catch as catchError

Try something like this

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



    return this.httpClient

        .get(url).pipe(catchError(this.handleError));

}

Hope this helps - Happy coding :)

In addition to using catchError rather than catch, because HttpClient returns an Observable, consider that a subscription to an Observable has 3 callback parameters corresponding to the success events, the error events, and then a completion event when the connection is finished what it was doing (really you can ignore this one most of the time). So, your code could look like this:

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!')

  )

Angular 6 went from RxJs 5 to RxJs 6 and there are a few breaking changes.

catch has been renamed to catchError

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

There is a compatibility library you can install for when you upgrade from RxJs 5 to 6 but it is better to modify your code to be RxJs 6 compatible.