Property 'do' does not exist on type 'Observable<IProduct[]>'

Question

After upgrading to Angular 6.0 and Rxjs to 6.0 I receive the following compilation error:

Property 'do' does not exist on type 'Observable'.

Here is the code:

import { Observable, of } from 'rxjs';
import 'rxjs/add/operator/do';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';
import { IProduct } from './product';

@Injectable()
export class ProductService { 
    constructor(
        private product: IProduct)
    {         
    }

    getProduct = () => { 
        return product.products
            // error on next line
            .do(data => console.log('All:' + JSON.stringify(data)))
            .catch(this.handleError);
    }

    private handleError(err: HttpErrorResponse) { 
        console.log(err.message);
        return Observable.throw(err.message);        
    }
}

Any idea?

Answer 1

The problem is not with angular but with rxjs. rxjs introduced breaking changes from rxjs version 6.

To get your code working again without changing any of your code install the following package:

npm install rxjs-compat@6 --save

You should then be able to compile your project. rxjs-compat is meant to be a temporarily solution so you need to update your codebase to work with the new version.

---

New Import Path

What you need to update:

1. Update import statements from

   import { Observable } from "rxjs/Observable";

   to

   import { Observable } from "rxjs";

2. Update your operator imports from

   import 'rxjs/add/operator/do'

   to

   import { do } from "rxjs/operators";

---

Renamed Operators

Some operators have also been renamed due to name collisions with JavaScript reserved words. They are

1. do => tap

2. catch => catchError

3. switch => switchAll

4. finally => finalize

---

No Operator Chaining

You also then can't chain your operators anymore you need to use the pipe operator e.g.

// an operator chain
source
  .map(x => x + x)
  .mergeMap(n => of(n + 1, n + 2)
    .filter(x => x % 1 == 0)
    .scan((acc, x) => acc + x, 0)
  )
  .catch(err => of('error found'))
  .subscribe(printResult);

// must be updated to a pipe flow
source.pipe(
  map(x => x + x),
  mergeMap(n => of(n + 1, n + 2).pipe(
    filter(x => x % 1 == 0),
    scan((acc, x) => acc + x, 0),
  )),
  catchError(err => of('error found')),
).subscribe(printResult);