javascript - Angular CLI 错误 : Return type of public method from exported class has or is using name 'ErrorObservable' from external module but cannot be named

Question

在构建一个应用程序是一个正在运行的 Angular 2(非 cli)应用程序的克隆之后，我注意到我的几个文件正在产生错误(相同类型)，因为该项目是使用 Angular-CLI 构建的.我不清楚为什么这些是 CLI 版本中的错误，而不是其他版本中的错误。这是与 Webpack 相关的问题吗？或者与两个构建之间的 Typescript 处理方式不同有关？澄清一下，初始应用程序使用 SystemJS，而 Angular-CLI 版本使用 Webpack。当我说我“构建”了该应用程序时，我的意思是我在这个克隆版本中重新创建了我在原始应用程序中拥有的所有组件、指令、模块、路由等。这是我收到的一般错误消息(跨多个文件):

Error: Return type of public method from exported class has or is using name 'ErrorObservable' from external module but cannot be named

下面是一个被列为产生此错误的文件示例:

import { Observable } from 'rxjs/Observable';
import { Http, Response } from '@angular/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

@Injectable()
export class StreamCountsService {

    private _url: string = "https://api.somesite.com"

    constructor(private _http: Http) {}

    getCount() {
        return this._http.get(this._url)
            .map((response:Response) => response.json())
            .catch(this._errorsHandler);
    }
    _errorsHandler(error: Response) {
        console.error(error);
        return Observable.throw(error || "Server Error");
    }
}

我的设置:MacBook Air、OS X El Capitan

Angular-CLI 版本运行 Angular-CLI 版本 1.0.0-beta.22-1

完整的错误跟踪看起来像这样(为保护隐私而略有编辑):

vendor.bundle.js:52455 ./src/app/data/stream.service.ts Module build failed: Error: /Users/adds/Documents/abc/abc-cli/cli-abc/src/app/data/stream-assign.service.ts (20,5): Return type of public method from exported class has or is using name 'ErrorObservable' from external module "/Users/adds/Documents/abc/abc-cli/cli-abc/node_modules/rxjs/observable/ErrorObservable" but cannot be named.) at _checkDiagnostics (/Users/adds/Documents/abc/abc-cli/cli-abc/node_modules/@ngtools/webpack/src/loader.js:115:15) at /Users/adds/Documents/abc/abc-cli/cli-abc/node_modules/@ngtools/webpack/src/loader.js:140:17 @ ./src/app/views/stream/stream-module.ts 25:0-82 @ ./src/app/app.module.ts @ ./src/app/index.ts @ ./src/main.ts @ multi main vendor.bundle.js:52455 ./src/app/data/stream-assign.service.ts Module build failed: Error: /Users/adds/Documents/abc/abc-cli/cli-abc/src/app/data/stream-assign-comm.service.ts (20,5): Return type of public method from exported class has or is using name 'ErrorObservable' from external module "/Users/adds/Documents/abc/abc-cli/cli-abc/node_modules/rxjs/observable/ErrorObservable" but cannot be named.) at _checkDiagnostics (/Users/adds/Documents/abc/abc-cli/cli-abc/node_modules/@ngtools/webpack/src/loader.js:115:15) at /Users/adds/Documents/abc/abc-cli/cli-abc/node_modules/@ngtools/webpack/src/loader.js:140:17 @ ./src/app/views/stream/stream-module.ts 25:0-82 @ ./src/app/app.module.ts @ ./src/app/index.ts @ ./src/main.ts @ multi main

这是我的 package.json 文件内容:

{
  "name": "cli-ark",
  "version": "0.0.1",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.2.3",
    "@angular/compiler": "2.2.3",
    "@angular/core": "2.2.3",
    "@angular/forms": "2.2.3",
    "@angular/http": "2.2.3",
    "@angular/platform-browser": "2.2.3",
    "@angular/platform-browser-dynamic": "2.2.3",
    "@angular/router": "3.2.3",
    "@types/socket.io": "^1.4.27",
    "@types/socket.io-client": "^1.4.29",
    "angular-in-memory-web-api": "~0.1.15",
    "angular2-chartjs": "^0.1.6",
    "chart.js": "^2.4.0",
    "core-js": "^2.4.1",
    "ng2-charts": "^1.4.1",
    "rxjs": "5.0.0-beta.12",
    "socket.io": "^1.7.2",
    "socket.io-client": "^1.7.2",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "@angular/compiler-cli": "2.2.3",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.22-1",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-node": "1.2.1",
    "typescript": "~2.0.3",
    "typings": "^1.3.2",
    "webdriver-manager": "10.2.5"
  }
}

Answer 1

尝试使用:

return Observable.throw(error.json().error || 'Server error');

如果您使用的是 rxjs > rc.5，请使用:

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

代替:

import 'rxjs/add/observable/throw';

这是不必要的

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';