error with using 'finalize, catcherror' operators

Question

I'm trying to implement an angular data table using the great example provided by angular university. But i'm stuck on implementing my datasource. Here is my datasource:

import { Aircraft } from '../shared/aircraft';
import { AircraftInfoService } from './aircraft-info.service';
import { BehaviorSubject } from 'rxjs';
import { CollectionViewer, DataSource } from '@angular/cdk/collections';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/catchError';
import 'rxjs/add/operator/finalize';

export class allAircraftInfoDataSource implements DataSource<Aircraft> {

  private aircraftDBSubject = new BehaviorSubject<Aircraft[]>([]);
  private loadingSubject = new BehaviorSubject<boolean>(false);

  public loading$ = this.loadingSubject.asObservable();

  constructor(private aircraftInfoService: AircraftInfoService) {}

  connect(collectionViewer: CollectionViewer): Observable<Aircraft[]> {
      return this.aircraftDBSubject.asObservable();
  }

  disconnect(collectionViewer: CollectionViewer): void {
      this.aircraftDBSubject.complete();
      this.loadingSubject.complete();
  }

  getAircraft() {

      this.loadingSubject.next(true);

      this.aircraftInfoService.getAircraft().pipe(
        catchError(() => **of**([])),
        finalize(() => this.loadingSubject.next(false))
    )
    .subscribe(data => this.aircraftDBSubject.next(data));      
  }    
}

I'm gettings errors on 'catchError', 'of', 'finalize' and the second use of 'data' is generating errors. Here are my compile errors:

ERROR in ../../src/app/services/aircraft-info-datasource.service.ts(31,9): error TS2552: Cannot find name 'catchError'. Did you mean 'RTCError'?
../../src/app/services/aircraft-info-datasource.service.ts(31,26): error TS2304: Cannot find name 'of'.
../../src/app/services/aircraft-info-datasource.service.ts(32,9): error TS2304: Cannot find name 'finalize'.
../../src/app/services/aircraft-info-datasource.service.ts(34,52): error TS2345: Argument of type '{}' is not assignable to parameter of type 'Aircraft[]'.
  Type '{}' is missing the following properties from type 'Aircraft[]': length, pop, push, concat, and 26 more.

I thought I'd followed the examples to the letter, but I'm obviously missing something. What do i need to correct?

thanks.....

Answer 1

You're importing RxJS 5 "patch style" of operators and trying to use them as RxJS 6 "pipable operators" (also catchError was formerly known as catch in RxJS 5).

import { of } from 'rxjs';
import { catchError, finalize } from 'rxjs/operators';

For migration docs see:

• https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md
• https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md