Angular2 Injectable Serviceを動的に上書きするにはどうすればよいですか？

Question

私は、開発モード（npm start）で実行しているので、サーバがない場合は、MockHttpRequestServiceで置き換えたい注入可能なサービスHttpRequestServiceがあります。このMockHttpRequestServiceは非常に簡単な応答を返します。

私はHttpRequestServiceを動的に置き換える方法を見つけたと思っていましたが、残念ながらHttpRequestServiceはまだ使用されています。ここに私が試したものです：

main.ts

import {bootstrap} from '@angular/platform-browser-dynamic'; 
import {provide} from '@angular/core'; 
import {ROUTER_PROVIDERS, Router} from '@angular/router-deprecated'; 
import {HashLocationStrategy, LocationStrategy} from '@angular/common' 
import {Http, HTTP_PROVIDERS} from '@angular/http'; 
import {CORE_DIRECTIVES} from '@angular/common'; 
import {HttpRequestService} from './app/services/HttpRequestService'; 
import {MockHttpRequestService} from './app/services/MockHttpRequestService' 
import {MyConfigInjectable} from './app/MyConfigInjectable'; 
import {SomeService} from './app/services/SomeService'; 

export function main(initialState?: any): Promise<any> { 

    let providers = [ 
     ...HTTP_PROVIDERS, 
     ...CORE_DIRECTIVES, 
     ...ROUTER_PROVIDERS, 
     provide(LocationStrategy, { useClass: HashLocationStrategy }) 
    ]; 

    if(process.env.ENV === 'development'){ 
     console.log('Is it set to development?'); //Yes. Yes it is. 
     providers.push(MyConfigInjectable); 
     providers.push(SomeService); 
     providers.push(provide(HttpRequestService, { 
      deps: [MyConfigInjectable, Http, SomeService, Router], 
      useClass: MockHttpRequestService 
     })); 
    } 

    return bootstrap(App, providers).catch(err => console.error(err)); 
} 

MockHttpRequestService.ts

import {Injectable} from '@angular/core'; 
import {Http} from '@angular/http'; 
import {Router} from '@angular/router-deprecated'; 
import {SomeService} from './SomeService'; 
import {MyConfigInjectable} from '../MyconfigInjectable'; 

@Injectable() 
export class MockHttpRequestService extends HttpRequestService { 
    constructor(protected config: MyConfigInjectable, 
       protected http: Http, 
       protected someService: SomeService, 
       protected router: Router) { 
     super(config, http, someService, router); 
    } 

    post(url: string, body: string) { 
     console.log('Are we getting here?'); //No. No we're not. 
     //... 
    } 
} 

Answer 1

あなたがそのようなブートストラップにuseClassでAngular2サービス注射サービスをoverwritteことができます。

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

    const IS_ENV_DEV = true; //Put this constant in your config maybe 

    bootstrap(App, [ 
     provide(RaceService, {useClass: IS_ENV_DEV ? MockHttpRequestService : HttpRequestService}) 
    ]) 

またはHTTPサービスを使用するコンポーネント

@Component({ 
    selector: 'my-comp', 
    providers: [provide(HttpRequestService, {useClass: MockHttpRequestService})], 
    template: `<strong>I use a mocked service</strong>` 
}) 
export class MyComponent { 

    constructor(private httpRequestService: HttpRequestService) { 
    //Faker ! 
    } 
} 

私はこの応答は役に立つ願っています:)