类型“Observable”上不存在属性“do”

Question

升级到Angular 6.0和Rxjs到6.0后，我收到以下编译错误：

类型“Observable”上不存在属性“do”

代码如下：

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

有什么想法吗？




Answer 1

匿名用户

Rxjs 6引入了一些突破性的更改，“do”操作符被“tap”操作符替换（来自“Rxjs/internal/operators”）。

您可以使用新的运算符重构代码，也可以通过添加rxjs compat库来实现向后兼容性（npm安装--save rxjs compat），从而仍然使用旧的“do”语法。

请注意，在RxJs 6之前，您必须导入do操作符：

import 'rxjs/add/operator/do';

更多详细信息：Angular HTTP GET与TypeScript错误http.get（...）. map不是一个函数在[null]

Answer 2

匿名用户

我很欣赏Tjaart van der Walt关于如何解决Angular/rxjs7中引入的“突破性变化”的回应。但是我仍然遇到了几个问题，试图将他的响应应用于我的Angular拦截器：

这是更新后的代码（未能编译的部分标记为“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);
  }
}

所需的更改包括更改导入路径，以及替换管道（）、tap（）和（）的。

此链接也是RxJS6更改的良好资源：

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

Answer 3

问题不在于角度，而在于rxjs。rxjs引入了rxjs版本6的突破性更改。

要在不更改任何代码的情况下重新运行代码，请安装以下软件包：

npm安装rxjs-compat@6--保存

然后，您应该能够编译您的项目。rxjs-compat是一个临时解决方案，因此您需要更新代码库以使用新版本。

您需要更新的内容：

>

从更新导入语句

从“rxjs/Observable”导入{Observable}

到

从"rxjs"导入{可观察}；

从更新您的操作员导入

导入'rxjs/add/operator/do'

到

从rxjs/运算符导入{do}；

由于与JavaScript保留字的名称冲突，一些运算符也被重命名。他们是

>

do=

捕获=

开关=

最后=

然后，您也无法再链接您的操作符。您需要使用管道操作符，例如。

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