ng-cli/rxjs：多个 Observable 模块？

Question

我第一次尝试使用 observable。我正在使用angular-cli 到build/serve 我的项目：当我提供我的应用程序时，我收到以下错误。知道这意味着什么吗？为什么会有两个可观察的模块？我正在使用它来处理来自本地服务器的休息响应，但似乎我可能会得到错误的 observable，因为我收到了 NET_ERR 作为响应......

我的错误：

lang.js:124Angular 2 正在开发模式下运行。称呼 enableProdMode() 启用生产模式。 client:38[WDS] 编译时的警告。 客户端：73./~/rxjs/Observable.js 有多个模块的名称只是大小写不同。 在使用其他大小写语义的文件系统上编译时，这可能会导致意外行为。 使用相等的大小写。比较这些模块标识符： * C:\Users\Deon\Documents\trade-link\barcode-checker\node_modules\rxjs\Observable.js 由 6 个模块使用，i。 e. C:\Users\Deon\Documents\trade-link\barcode-checker\node_modules\@angular\core\src\facade\async.js * C:\Users\Deon\Documents\trade-link\barcode-checker\node_modules\rxjs\observable.js 由 1 个模块使用，i。 e. C:\Users\Deon\Documents\trade-link\barcode-checker\node_modules\awesome-typescript-loader\dist\entry.js?{"useForkChecker":true,"tsconfig":"C:\Users\Deon\ Documents\trade-link\barcode-checker\src\tsconfig.json","externals":["C:/Users/Deon/Documents/trade-link/barcode-checker/src/app/app.component.spec. ts","C:/Users/Deon/Documents/trade-link/barcode-checker/src/app/app.component.ts","C:/Users/Deon/Documents/trade-link/barcode-checker/ src/app/app.module.ts","C:/Users/Deon/Documents/trade-link/barcode-checker/src/app/Components/product/product.component.spec.ts","C:/用户/Deon/Documents/trade-link/barcode-checker/src/app/Components/product/product.component.ts","C:/Users/Deon/Documents/trade-link/barcode-checker/src/app /index.ts","C:/Users/Deon/Documents/trade-link/barcode-checker/src/app/models/product.model.ts","C:/Users/Deon/Documents/trade-link /barcode-checker/src/app/services/rest.service.spec.ts","C:/Users/Deon/Documents/trade-link/barcode-checker/src/app/services/rest.service.ts" ，“C： /Users/Deon/Documents/trade-link/barcode-checker/src/environments/environment.prod.ts","C:/Users/Deon/Documents/trade-link/barcode-checker/src/environments/environment. ts","C:/Users/Deon/Documents/trade-link/barcode-checker/src/main.ts","C:/Users/Deon/Documents/trade-link/barcode-checker/src/polyfills. ts","C:/Users/Deon/Documents/trade-link/barcode-checker/src/test.ts","C:/Users/Deon/Documents/trade-link/barcode-checker/src/typings. d.ts"],"doTypeCheck":true,"sourceMap":true,"verbose":false}!C:\Users\Deon\Documents\trade-link\barcode-checker\node_modules\angular2-template-loader\ index.js!C:\Users\Deon\Documents\trade-link\barcode-checker\src\app\services\rest.service.tswarnings @客户：73 error_handler.js:48EXCEPTION：./AppComponent 类 AppComponent 中的错误 - 内联模板：5:42 由：this.http.get(...).map 引起 不是函数ErrorHandler.handleError@error_handler.js:48 error_handler.js:50原始例外：this.http.get(...).map 不是函数ErrorHandler.handleError @ error_handler.js:50 error_handler.js:53 原始堆栈跟踪：ErrorHandler.handleError @ error_handler.js:53 error_handler.js:54TypeError: this.http.get(...).map 不是函数 在 RestService.getProduct (rest.service.ts:13) 在 AppComponent.submitBarcode (app.component.ts:25) 在 _View_AppComponent0._handle_click_9_0 (component.ngfactory.js:111) 在 view.js:365 在 dom_renderer.js:262 在 dom_events.js:30 在 ZoneDelegate.invoke (zone.js:232) 在 Object.onInvoke (ng_zone.js:238) 在 ZoneDelegate.invoke (zone.js:231) 在 Zone.runGuarded (zone.js:128)ErrorHandler.handleError@error_handler.js:54 error_handler.js:57错误上下文:ErrorHandler.handleError@error_handler.js:57 error_handler.js:58DebugContextErrorHandler.handleError@error_handler.js:58 zone.js:158Uncaught ViewWrappedError

RestService：（使用 observable）

import { Injectable } from '@angular/core';
import { Http, Headers, Response, RequestOptions  } from "@angular/http";
import { Observable } from  "rxjs/observable";
import { ProductModel } from "../models/product.model";

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




@Injectable()
export class RestService {
public API_URL: string = "http://10.60.160.34/BRMServices/WebEnquiry/";
private headers: Headers;
private options: RequestOptions;


  constructor(private http: Http){
      this.init();
  }

  init() {
      this.headers = new Headers({ 'Content-Type': 'application/json' });
      this.options = new RequestOptions({ headers: this.headers });
  }

  getProduct(barcode: string): Observable<ProductModel> {

      return this.http.get(this.API_URL + "/POSEnquiry/" + barcode, this.options)
      .map((res: Response) => res.json())
      .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
  }  
}

app.component.ts：

import { Component } from '@angular/core';

import { RestService } from "./services/rest.service";
import { ProductModel } from "./models/product.model";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

    product: ProductModel;

    constructor(private restService: RestService){

    }

submitBarcode(barcode: HTMLInputElement){

    this.restService.getProduct(barcode.value)
    .subscribe(
    (res) => {
        //product = res;
        console.log(res);
    },
    (res) => {
        console.log("failure" + res);
    }
    );
    //console.log("product: " + product);
}

}

Answer 1

发生错误是因为它在引用中找不到地图。

TypeError: this.http.get(...).map 不是函数 RestService.getProduct(rest.service.ts:13)

在这种情况下，我建议使用import { Observable } from 'rxjs/Rx' 而不是import { Observable } from "rxjs/observable"; 和所有import 'rxjs/add/...'。这将消除两个具有不同大小写的可观察模块的警告。

您也可以使用 RequestOptionsArgs 代替 RequestOptions。我认为这将解决错误。 （当我将我的代码与您的代码进行比较时，这些是唯一的区别）