Angular6：Property catch不存在

Question

我是Angular的新手，我对它有基本的了解。我想学习HttpClient，所以我可以创建一个json文件而不是真正的服务器。我创建了一个服务并导入了HttpClient：

service.ts

import { Injectable } from '@angular/core';
import {HttpClient, HttpErrorResponse} from '@angular/common/http';
import {IEmployee} from "../../../service/src/app/employee";
import {Observable} from "rxjs/index";
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

在我的班级EmployeeService中，我创建了一个从json文件中获取数据的方法：

@Injectable({
  providedIn: 'root'
})
export class EmployeeService {

  private _url: string = "/assets/data/employees.json";

  constructor(private http:HttpClient) { }

  getEmployee():Observable<IEmployee[]> {
    return this.http.get<IEmployee[]>(this._url)
      .catch(this.errorHandler);
  }

  errorHandler(error: HttpErrorResponse) {
    return Observable.throw(error.message || "Server Error")
  }
}

但是在getEmployee方法中我遇到了这些错误：

ERROR in ./src/app/employee.service.ts
Module not found: Error: Can't resolve 'rxjs/add/observable/throw' in 'E:\Tutorial\NodeJS\WebstormProjects\Angular\http\src\app'
ERROR in ./src/app/employee.service.ts
Module not found: Error: Can't resolve 'rxjs/add/operator/catch' in 'E:\Tutorial\NodeJS\WebstormProjects\Angular\http\src\app'
i ｢wdm｣: Failed to compile.

正如您所看到的，我已导入throw和catch运算符，但我不知道为什么会一直出错。

另一个问题是，由于弃用（throw method），Deprecated symbol used, consult docs for better alternative下面出现了一行！ 有什么替代方案？

Angular CLI: 6.0.1
Node: 10.0.0
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.6.1
@angular-devkit/core         0.6.1
@angular-devkit/schematics   0.6.1
@schematics/angular          0.6.1
@schematics/update           0.6.1
rxjs                         6.1.0
typescript                   2.7.2

******************编辑***************

  

我想在Angular中使用内置的Observable，我不想使用RXJS第三方库来实现角度。

这是我的节点模块rx文件夹，您可以在其中看到可观察文件。

在node_modules\rxjs\operator文件夹中有throw和catch文件。 但是为什么它要将这些文件搜索到出错的E:\Tutorial\NodeJS\WebstormProjects\Angular\http\src\app文件夹中？

Answer 1

我通过安装修复了我的问题：

npm install --save rxjs@6 rxjs-compat@6

并将此路径用于rxjs：

import {Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent, throwError} from 'rxjs';
import {catchError} from "rxjs/internal/operators";

似乎在角度为6的情况下进行了描述，因此我使用了如下的catchError：

  getEmployee():Observable<IEmployee[]> {
    return this.http.get<IEmployee[]>(this._url)
      .pipe(
        catchError(this.errorHandler));
  }

  errorHandler(error: HttpErrorResponse) {
    return throwError(error.message || "Server Error")
  }

所有错误现在都消失了： - ）

Answer 2

以下参考文献对您来说已经足够了。删除不需要的引用

import { Injectable } from '@angular/core';
import {HttpClient, HttpErrorResponse} from '@angular/common/http';
import {IEmployee} from "../../../service/src/app/employee";
import {Observable} from "rxjs/Observable";

其中， 删除了以下参考文献

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

更改"rxjs/Observable"而不是"rxjs/index";

更新

应检查包含这些文件的rxjs文件夹，如果没有，那么您的包裹遗漏了一些内容。你需要重新安装它。

Answer 3

导入这些参考

import { throwError, Observable } from 'rxjs';
import {throwError as observableThrowError} from 'rxjs';
import {catchError} from 'rxjs/operators'

，然后在下面将您的代码更改为

getEmployees():Observable<IEmployee[]> {

return this.http.get<IEmployee[]>(this._url).pipe(
catchError(this.errorHandler));
}
errorHandler(error: HttpErrorResponse) {
return observableThrowError(error.message ||"server error");
} 

https://www.youtube.com/watch?v=ScaKGrW5s0I&list=PLC3y8-rFHvwhBRAgFinJR8KHIrCdTkZcZ&index=31

如果您仍然不明白，请查看上面的视频链接

Answer 4

ErrorObservable创建一个Observable，该Observable不会向观察者发出任何项目，并立即发出错误通知。

只是这样导入

 import { ErrorObservable } from 'rxjs/observable/ErrorObservable';

并创建错误

ErrorObservable.create('error');