What is the RXJS 6 way of handling http Observables?

Question

I noticed that my code doesnt work when I use it in a new project:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

import { TypeAndCountURL } from '@app/constants';
import { HttpErrorService } from '@app/services/http-error.service';
import { TypeAndCountResponseBody, TypeAndCountRequestBody } from '@app/models/type-and-count/bodies.interface';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  constructor (private http: HttpClient, private httpErrorService: HttpErrorService) {}

  postTypeAndCountRequest(typeAndCountRequestBody: TypeAndCountRequestBody): Observable<TypeAndCountResponseBody> {
    return this.http.post<TypeAndCountResponseBody>(TypeAndCountURL, typeAndCountRequestBody).pipe(
      catchError(this.httpErrorService.handleError<TypeAndCountResponseBody>('postTypeAndCountRequest'))
    );

  }
}

specifically, I am getting Cannot find name 'catchError'. Did you mean 'RTCError'?ts(2552) Cannot find name 'catchError'. Did you mean 'RTCError'?ts(2552)

Reading up on this, I see that I can resolve the issue by importing it separately (from rxjs/operators .. whihc is fine, but) .. but also that this whole structure is compat mode for rxjs 5 ... what is the RXJS 6 way of handling the error response?

Answer 1

You can use

import { catchError } from "rxjs/operators";

fetchUser() {
       this.userService.getProfile()
          .subscribe(
             (data: User) => this.userProfile = { ...data }
              , // success path
              error => this.error = error // error path
       );
    }