Property 'do' does not exist on type 'Observable<IProduct[]>'
Solution 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:
-
Update import statements from
import { Observable } from "rxjs/Observable";
to
import { Observable } from "rxjs";
-
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
-
do
=>tap
-
catch
=>catchError
-
switch
=>switchAll
-
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);
Solution 2:
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/
Solution 3:
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]
Solution 4:
"do" operator had replaced with "tap" operator in rxjs 6 , that why this error occurs "Property 'do' does not exist on type 'Observable<IProduct[]>'"
To Fix this Error, you have two options
Solution 1: Patch your code ... it will work fine with do operator
npm install rxjs-compat@6 --save
Solution 2: Replace your next.handle code with below code
return next.handle(req).pipe(
tap(
event => this.handleResponse(req, event),
error => this.handleError(req, error)
)
);