Property 'do' does not exist on type '

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

Answer 2

Rxjs 6 has introduced some breaking changes and the "do" operator has been replaced by the "tap" operator (from 'rxjs/internal/operators').

You could refactor your code using the new operator or still use the old 'do' syntax by adding the rxjs-compat library for backward compatibility (npm install --save rxjs-compat).

Note that before RxJs 6 you had to import the 'do' operator :

import 'rxjs/add/operator/do';

More details here : Angular HTTP GET with TypeScript error http.get(...).map is not a function in [null]

Answer 3

Just use in your typescript file:

import 'rxjs/add/operator/do';

as simple as that. Thanks.

Answer 4

I appreciate Tjaart van der Walt's response about how to resolve the "breaking changes" introduced in Angular/rxjs7++. But I still encountered several problems trying to apply his response to my Angular interceptor:

Here is the updated code (the sections that failed to compile are marked "OLD")

import {Injectable} from '@angular/core';
import {HttpEvent, HttpInterceptor, HttpResponse} from '@angular/common/http';
import {HttpHandler, HttpRequest, HttpErrorResponse} from '@angular/common/http';

/*
  OLD:
  import {Observable} from 'rxjs/Observable';
  import 'rxjs/add/operator/do';
 */
import { Observable } from 'rxjs';
import { of } from 'rxjs';
import { tap, catchError } from 'rxjs/operators';

import { AuthService } from './auth.service';

@Injectable()
export class StockAppInterceptor implements HttpInterceptor {

  constructor(private authService: AuthService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (this.authService.authToken) {
      const authReq = req.clone({
        headers: req.headers.set(
          'Authorization',
          this.authService.authToken
        )
      });
      console.log('Making an authorized request');
      req = authReq;
    }
    /*
     * OLD:
     * return next.handle(req)
     *   .do(event => this.handleResponse(req, event),
     *      error => this.handleError(req, error));
     */
    return next.handle(req).pipe(
      tap(
        event => this.handleResponse(req, event),
        error => this.handleError(req, error)
      )
    );
  }


  handleResponse(req: HttpRequest<any>, event) {
    console.log('Handling response for ', req.url, event);
    if (event instanceof HttpResponse) {
      console.log('Request for ', req.url,
          ' Response Status ', event.status,
          ' With body ', event.body);
    }
  }

  handleError(req: HttpRequest<any>, event) {
    console.error('Request for ', req.url,
          ' Response Status ', event.status,
          ' With error ', event.error);
  }
}

Required changes include changing import paths, and substituting pipe(), tap() and of().

This link is also a good resource for RxJS6 changes:

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