Свойство do не существует для типа Observable<IProduct []>

Question

После обновления до Angular 6.0 и Rxjs до 6.0 я получаю следующую ошибку компиляции:

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

Любая идея?

Answer 1

Проблема не с угловой, а с rxjs. В rxjs внесены критические изменения по сравнению с версией 6 rxjs.

Чтобы ваш код снова заработал без изменения какого-либо кода, установите следующий пакет:

npm install rxjs-compat@6 --save

После этого вы сможете скомпилировать свой проект. rxjs-compat Это временное решение, поэтому вам нужно обновить базу кода для работы с новой версией.

---

Новый путь импорта

Что нужно обновить:

1. Обновить операторы импорта из

   import { Observable } from "rxjs/Observable";

   в

   import { Observable } from "rxjs";

2. Обновите ваш оператор импорта из

   import 'rxjs/add/operator/do'

   в

   import { do } from "rxjs/operators";

---

Переименованные операторы

Некоторые операторы также были переименованы из-за конфликтов имен с зарезервированными словами JavaScript. Они есть

1. do => tap

2. catch => catchError

3. switch => switchAll

4. finally => finalize

---

Нет оператора цепочки

Вы также не можете больше связывать своих операторов, вам нужно использовать pipe оператор например

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

Я ценю ответ Тьяарта ван дер Уолта о том, как разрешить "критические изменения", введенные в Angular/rxjs7++. Но я все еще сталкивался с несколькими проблемами, пытаясь применить его ответ к моему угловому перехватчику:

Вот обновленный код (разделы, которые не удалось скомпилировать, помечены как "СТАРЫЕ")

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

Обязательные изменения включают изменение import пути и замены pipe(), tap() а также of(),

Эта ссылка также является хорошим ресурсом для изменений RxJS6:

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

Answer 3

Вам необходимо импортировать оператор do:

import 'rxjs/add/operator/do';

Подробнее здесь: Угловой HTTP GET с ошибкой TypeScript http.get(...). Map не является функцией в [null]

Answer 4

Оператор do был заменен оператором tap в rxjs 6, поэтому возникает эта ошибка: "Свойство do 'не существует для типа Observable'"

Чтобы исправить эту ошибку, у вас есть два варианта

Решение 1. Исправьте свой код... он будет нормально работать с оператором do

npm install rxjs-compat@6 --save

Решение 2. Замените код next.handle приведенным ниже кодом.

 return next.handle(req).pipe(
      tap(
        event => this.handleResponse(req, event),
        error => this.handleError(req, error)
      )
    );

Answer 5

Просто используйте в своем файле машинописного текста:

import 'rxjs/add/operator/do';

так просто, как, что. Спасибо.