生産のためにangular2 in-memory-web-apiを無効にする

Question

私は開発のためにangular2 in-memory-web-apiを使用しています。実稼働環境では、in-memory-web-apiと私の実際のAPIを使用不可にします。プロダクション用にInMemoryWebApiModuleを無効にする方法はありますか？

Answer 1

ノードスイッチENVへの角型CLI environmentであれ、何らかの「スイッチ」があると仮定すると、どちらを使用するかを切り替えることができます。 in-memory-web-apiは、独自のバックエンドInMemoryBackendServiceを使用します。だから、ここで

import { NgModule, Injector } from '@angular/core'; 
import { HttpModule, XHRBackend, BrowserXhr, 
     ResponseOptions, XSRFStrategy } from '@angular/http'; 

import { InMemoryBackendService, InMemoryDbService } from 'angular-in-memory-web-api'; 

let environment = { 
    production: true 
}; 

export class MockData implements InMemoryDbService { 
    createDb() { 
    let cats = [ 
     { id: 1, name: 'Fluffy' } 
    ]; 
    return { cats }; 
    } 
} 

@NgModule({ 
    imports: [ HttpModule ], 
    providers: [ 
    { 
     provide: XHRBackend, 
     useFactory: (injector: Injector, browser: BrowserXhr, 
        xsrf: XSRFStrategy, options: ResponseOptions): any => { 
     if (environment.production) { 
      return new XHRBackend(browser, options, xsrf); 
     } else { 
      return new InMemoryBackendService(injector, new MockData(), { 
      // the configuration object 
      }); 
     } 
     }, 
     deps: [ Injector, BrowserXhr, XSRFStrategy, ResponseOptions ] 
    } 
    ] 
}) 
export class AppHttpModule { 
} 

、我々はその後、動的XHRBackend依存関係を作成し、HttpModuleを輸入しているような何かを行うことができます。開発環境では、バックエンドサービスを使用します。これは、実際にはInMemoryWebApiModuleを使用すると起こります。したがって、そのモジュールを使用する代わりに、バックエンドサービスを自分で設定するだけです。また、実稼働環境では、通常使用される同じXHRBackendを使用します。

environmentにも注目してください。これは単なる例です。これはおそらくあなたによって使用されません。理想的には、環境はコマンドラインで制御されるものでなければなりません。 Angular CLIの場合、実際ににあるenvironmentという変数があります。プロダクションビルドでは、CLIによって環境が自動的に切り替わります。

CLIを使用していない場合は、ノードENVを使用するか、スイッチの生産計画を立てることができます。要点は、上記のenvironmentは単なる例にすぎません。理想的には、これはあなたが手動で変更しなければならないものではありません。プロジェクトでは、プロダクションビルドを決定するための何らかの方法が必要です。これはコード内でアクセスできる必要があります。

また、上記AppHttpModuleで、あなたはもはや単なるAppHttpModule

Answer 2

このシンプルなアプローチをインポートし、あなたのAppModuleにHttpModuleをインポートする必要がありませんが私の作品：

const ENV = 'prod'; // your global ENV variable; 
 
----- 
 

 
@NgModule({ 
 
    imports: [ 
 
    ... 
 
    HttpModule, 
 
    ENV !== 'prod' ? InMemoryWebApiModule.forRoot(DataMockService) : [], 
 
    ], 
 
    ... 
 
}) 
 
export class AppModule {}

Answer 3

同じ方法：

import { environment } from './app.constants'; 
let myTestApiModule = []; 
if (!environment.production) { 
    myTestApiModule.push(InMemoryWebApiModule.forRoot(InMemDataService, 
    { delay: 500 }) 
    ); 
} 

imports: [ 
    CommonModule, 
    SharedModule, 
    ...myTestApiModule, 
],