Question

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

我的错误：

lang.js：124Angular 2正在开发模式下运行。呼叫 enableProdMode（）启用生产模式。客户端：编译时38 [WDS]警告。客户端：73./~/rxjs/Observable.js 有多个模块的名称只有外壳不同。在使用其他case-semantic编译文件系统时，这可能会导致意外行为。使用相同的套管。比较这些模块标识符： * C：\ Users \ Deon \ Documents \ trade-link \ barcode-checker \ node_modules \ rxjs \ Observable.js 由6个模块使用，i。即 C：\用户\的Deon \文档\贸易环节\条形码检查\ node_modules \ @angular \核心的\ src \门面\ async.js * C：\ Users \ Deon \ Documents \ trade-link \ barcode-checker \ node_modules \ rxjs \ _ observable.js 由1个模块使用，i。即 C：\用户\的Deon \文档\贸易环节\条形码检查\ node_modules \真棒，打字稿装载机\ DIST \ entry.js { “useForkChecker”：真实的， “tsconfig”：“C：\用户\出温\文档\贸易环节\条形码检查的\ src \ tsconfig.json “ ”外部对象“：” 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：/用户/出温/文档/贸易-LINK /条形码检查/ SRC /应用/ app.module.ts “ ”C：/Users/Deon/Documents/trade-link/barcode-checker/src/app/Components/product/product.component.spec.ts“，” C：/用户/出温/文档/贸易-LINK /条形码检查/ src目录/应用/组件/产品/ product.component.ts “” C：/用户/出温/文档/贸易-LINK /条形码检查/ src目录/应用/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：/用户/出温/文档/贸易-LINK /条形码检查/ src目录/ polyfills。 TS “ ”C：/Users/Deon/Documents/trade-link/barcode-checker/src/test.ts“，” C：/用户/出温/文档/贸易-LINK /条形码检查/ src目录/分型。 d.ts “]，” doTypeCheck “：真实的，” sourceMap “：真实的，” 详细“：假} C：\用户\的Deon \文档\贸易环节\条形码检查\ node_modules \ angular2模板装载机\ ！index.js C：\用户\的Deon \文档\贸易环节\条形码检查的\ src \程序\ SERVICES \ rest.service.tswarnings @客户：73 error_handler.js：48EXCEPTION：./AppComponent类中的错误AppComponent - 内联模板：5：42由：this.http.get（...）引起。不是functionErrorHandler.handleError @ error_handler.js：48 error_handler.js：50ORIGINAL EXCEPTION：this.http.get（...）。map不是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不是函数在RestService.getProduct（rest.service.ts:13）在AppComponent.submitBarcode（app.component.ts:25） at _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） at 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：57ERROR语境：ErrorHandler.handleError @ error_handler.js：57 error_handler.js：58DebugContextErrorHandler.handleError @ error_handler.js：58 zone.js：158 Uncaught 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）

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

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

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

1 个答案: