ng-cli/rxjs：多个可观察模块？

Question

我想第一次使用observable。我正在使用angular-cli到build/serve我的项目：当我服务我的应用程序时，出现以下错误。任何想法这意味着什么？为什么会有两个可观察模块？我使用这个来处理从本地服务器休息响应，但好像我可能会得到回错了观察到的，因为我得到一个NET_ERR作为响应...

我的错误：

lang.js:124Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode. client:38[WDS] Warnings while compiling. client:73./~/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: * C:\Users\Deon\Documents\trade-link\barcode-checker\node_modules\rxjs\Observable.js Used by 6 module(s), 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 Used by 1 module(s), 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:/Users/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 @ client:73 error_handler.js:48EXCEPTION: Error in ./AppComponent class AppComponent - inline template:5:42 caused by: this.http.get(...).map is not a functionErrorHandler.handleError @ error_handler.js:48 error_handler.js:50ORIGINAL EXCEPTION: this.http.get(...).map is not a functionErrorHandler.handleError @ error_handler.js:50 error_handler.js:53ORIGINAL STACKTRACE:ErrorHandler.handleError @ error_handler.js:53 error_handler.js:54TypeError: this.http.get(...).map is not a function at RestService.getProduct (rest.service.ts:13) at AppComponent.submitBarcode (app.component.ts:25) at _View_AppComponent0._handle_click_9_0 (component.ngfactory.js:111) at view.js:365 at dom_renderer.js:262 at dom_events.js:30 at ZoneDelegate.invoke (zone.js:232) at Object.onInvoke (ng_zone.js:238) at ZoneDelegate.invoke (zone.js:231) at Zone.runGuarded (zone.js:128)ErrorHandler.handleError @ error_handler.js:54 error_handler.js:57ERROR CONTEXT:ErrorHandler.handleError @ error_handler.js:57 error_handler.js:58DebugContextErrorHandler.handleError @ error_handler.js:58 zone.js:158Uncaught ViewWrappedError

RestService：（使用可观察）

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 is not a function at RestService.getProduct (rest.service.ts:13)

在这种情况下，我会建议使用import { Observable } from 'rxjs/Rx'代替import { Observable } from "rxjs/observable";和所有import 'rxjs/add/...'。这将删除两个不同外壳的可观察模块的警告。

您还可以使用RequestOptionsArgs而不是RequestOptions。我认为这将解决错误。 （当我比较我的代码和你的这些是唯一的区别）