Angular6：属性捕获不存在

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(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 第三方库来实现 Angular。

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

在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 创建一个不向 Observer 发出任何项目并立即发出错误通知的 Observable。

就这样导入

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

并创建错误

ErrorObservable.create('error');