"rxjs" observable.throw не является функцией - Angular4

Я изучал Angular 4, и все шло гладко, пока я не попытался реализовать обработку уловов в сервисе. Я пытаюсь использовать "rxjs" catch и throw, но у меня есть неопределенная ошибка функции в моей консоли.

import { Injectable } from '@angular/core';
import { Http } from "@angular/http";
import { Observable } from 'rxjs/observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
import { AppError } from "../app/common/app.error";
import { NotFoundError } from "../app/common/not-found-error";
import { BadInput } from "../app/common/bad-input";

@Injectable()
export class PostService {
  private url = "https://jsonplaceholder.typicode.com/posts";

  constructor(private http: Http) { }

 deletepost(post){
      // return this.http.delete(this.url + '/' + post.id)
      // Hard-coded id to test 404
      return this.http.delete(this.url + '/' + 93498)
        .catch((error: Response) => {
          console.log('error within catch is ' + Response)
          if(error.status === 404)
            return Observable.throw(new NotFoundError(error));

          return Observable.throw(new AppError(error));
        });
    }
}

Это сообщение об ошибке:

TypeError: __WEBPACK_IMPORTED_MODULE_2_rxjs_observable__["Observable"].throw is not a function. 
(In '__WEBPACK_IMPORTED_MODULE_2_rxjs_observable__["Observable"].throw(new 
__WEBPACK_IMPORTED_MODULE_6__app_common_not_found_error__["a" /* NotFoundError 
*/](error))', 
'__WEBPACK_IMPORTED_MODULE_2_rxjs_observable__["Observable"].throw' is 
undefined) — post.service.ts:42

У меня также есть это предупреждение в моем браузере:

./~/rxjs/Observable.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* /Users/nickgowdy/Desktop/Angular2/angular4 source code/hello-world/node_modules/rxjs/Observable.js
    Used by 14 module(s), i. e.
    /Users/nickgowdy/Desktop/Angular2/angular4 source code/hello-world/node_modules/@angular/core/@angular/core.es5.js
* /Users/nickgowdy/Desktop/Angular2/angular4 source code/hello-world/node_modules/rxjs/observable.js
    Used by 1 module(s), i. e.
    /Users/nickgowdy/Desktop/Angular2/angular4 source code/hello-world/node_modules/@ngtools/webpack/src/index.js!/Users/nickgowdy/Desktop/Angular2/angular4 source code/hello-world/src/services/post.service.ts

Ответ 1

Ошибка There are multiple modules with names that only differ in casing. указывает на неправильный импорт, на который нацелено то, как вы пытаетесь использовать Observable.

Импорт должен быть с большой буквы "О", например:

import { Observable } from 'rxjs/Observable';

Это импортирует отдельный оператор Observable, который будет использоваться в сочетании с такими операторами, как catch или throw для созданных Observables.

import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

Чтобы импортировать полный объект Observable, вы должны импортировать его следующим образом:

import { Observable } from 'rxjs/Rx'

Надеюсь, это поможет!

Обновить:

В более новых версиях RxJS (5. 5+) операторы, такие как map() и filter() могут использоваться как конвейерные операторы в сочетании с pipe() а не как цепочка. Они импортируются такие как:

import { filter, map, catchError } from 'rxjs/operators';

Помните, что такие термины, как throw являются зарезервированными/ключевыми словами в JavaScript, поэтому оператор throw в RxJS импортируется как:

import { _throw } from 'rxjs/observable/throw';

Обновить:

Для более новых версий RxJS (6+) используйте это:

import { throwError } from 'rxjs';

и выбросить ошибку, как это:

if (error.status === 404)
    return throwError( new NotFoundError(error) )

Ответ 2

В RxJS 6 Observable.throw() заменяется throwError() который работает очень похоже на своего предшественника. Таким образом, вы можете заменить из Observable.throw(error) только throwError(error) путем импорта:

import { throwError } from 'rxjs';

Проверьте эту ссылку для дальнейшей ссылки: https://www.metaltoad.com/blog/angular-6-upgrading-api-calls-rxjs-6

Ответ 3

Я столкнулся с той же проблемой в моем angular 5 приложении. Я сделал, добавив новый пакет.

import { throwError } from 'rxjs';
import { filter, map, catchError } from 'rxjs/operators';

И из моего вызова службы http я возвращаю функцию.

return this.http.request(request)
      .pipe(map((res: Response) => res.json()),
        catchError((res: Response) => this.onError(res)));

И в функции onError я возвращаю ошибку с помощью throwError(error).

onError(res: Response) {
    const statusCode = res.status;
    const body = res.json();
    const error = {
      statusCode: statusCode,
      error: body.error
    };
    return throwError(error);
  }