angular2セットアップ模擬環境でJSONファイルを使用

Question

次のような模擬環境を設定しようとしています：this。

environment.mock.ts

export const environment = { 
    production: false, 
    PRODUCT_LIST : 'http://localhost:4200/app/mock-json/products.json', 
    SAVE_CART : 'http://localhost:4200/app/mock-json/cart.json' 
}; 

environment.ts

export const environment = { 
    production: false, 
    PRODUCT_LIST : 'http://x.x.x.x:9000/service/products', 
    SAVE_CART : 'http://x.x.x.x:9000/service/cart' 
}; 

サービス方法

getCartData (request: string):Promise<Cart[]>{ 
    return this.http.post(environment.SAVE_CART, request) 
       .toPromise() 
       .then(response => { 
         ..... 
       }) 
       .catch(this.handleError); 
    } 

Whを私はng serveで動作していますが、元のサービスエンドポイントではすべてが正常に動作しています。

しかし、私はng serve --environment=mockを使用していますが、POSTコールのためにカートを保存する機能が動作していません。

は、実際に私は

1. がng serveを使用して、このようにセットアップする構造を必要とする（すべてのGETコールが正常に動作しています）。元のサービスエンドポイントを使用する元の実装に切り替えることができます。
2. ng serve --environment=mock私はJSONファイルを使用する模擬実装に切り替えることができます。
3. 切り替え時には、コードに触れる必要はありません。モックの実装では、JSONファイルがハードコードされているので、事前定義されたデータセットが常に提供されます。

注： 私は私が探しています何のコンテキストを明確にするために、メインの質問を更新しました。 次のようなエラーが発生しましたPlunker（コンソールログを確認してください）。しかしメモ：このプランカーは環境を実装していないので、このプランナーを解決することで私の問題は解決しないかもしれません。

Answer 1

私は以下の考えでそれを理解することができました。

我々はAngular2 HTTPポストを継承してオーバーライドすることができれば、モック環境での使用時には、ここでの方法

を取得使用する 方法は私の問題を解決するため、次のコードです。

import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs/Rx'; 
import { RequestOptionsArgs, RequestOptions } from "@angular/http"; 
import { ConnectionBackend, Http, Request, Response, Headers } from "@angular/http"; 

@Injectable() 
export class MockHttp extends Http { 

    constructor(backend: ConnectionBackend, 
     defaultOptions: RequestOptions) { 
     super(backend, defaultOptions); 
    } 

    post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> { 
     console.log('Mock Http POST...'); 
     return super.get(url, options).catch(err => { 
      console.log(err); 
      if (err.status === 404) { 
       console.log('404 error'); 
       return Observable.throw(err); 
      } 
     }); 
    } 
} 

そして私は私のAppModule

{ 
     provide: Http, 
     useFactory: (
      backend: XHRBackend, 
      defaultOptions: RequestOptions) => { 
       if(environment.MOCK){ 
        return new MockHttp(backend, defaultOptions) 
       } 
       else { 
        return new Http(backend, defaultOptions); 
       } 
     }, 
     deps: [XHRBackend, RequestOptions] 
    } 

で、次のプロバイダを使用し、このようMOCK新しい環境変数に導入。

export const environment = { 
    production: false, 
    MOCK : true, 
    PRODUCT_LIST : ..... 
}; 

Answer 2

あなたのjsonは形式が正しくありませんでした。更新されたプランカーリンクを確認してください。

plunker here

mymodel.json：

{ 
    "name" : "Test", 
    "value" : "Test" 
} 

INORDERはポストを行うには、あなたはポストの要求を受信しようとしているMockbackendを使用する必要があります。 これをチェックするanswer