Angular2外部JSON設定ファイルによる非同期ブートストラップ

Question

私はangular2 RC6にアップグレードして、AppModuleをブートストラップする前に外部JSON設定ファイルをロードしたいと思います。私はRC5の前にこれを使っていましたが、このデータを注入するのと同じ方法を見つけるのが難しいです。

/** Create dummy XSRF Strategy for Http. */ 
const XRSF_MOCK = provide(XSRFStrategy, { provide: XSRFStrategy, useValue: new FakeXSRFStrategyService() }); 

/** Create new DI. */ 
var injector = ReflectiveInjector.resolveAndCreate([ConfigService, HTTP_PROVIDERS, XRSF_MOCK]); 

/** Get Http via DI. */ 
var http = injector.get(Http); 

/** Http load config file before bootstrapping app. */ 
http.get('./config.json').map(res => res.json()) 
    .subscribe(data => { 

     /** Load JSON response into ConfigService. */ 
     let jsonConfig: ConfigService = new ConfigService(); 
     jsonConfig.fromJson(data); 

     /** Bootstrap AppCOmponent. */ 
     bootstrap(AppComponent, [..., provide(ConfigService, { useValue: jsonConfig }) 
    ]) 
    .catch(err => console.error(err)); 
}); 

これはうまくいきましたが、RC6で動作するように変更するのに苦労しました。

私は、次のアプローチを試したがロードされたデータと私の定義済みのAppModuleを修正するために苦労しています：

const platform = platformBrowserDynamic(); 

if (XMLHttpRequest) { // Mozilla, Safari, ... 
    request = new XMLHttpRequest(); 
} else if (ActiveXObject) { // IE 
    try { 
    request = new ActiveXObject('Msxml2.XMLHTTP'); 
    } catch (e) { 
    try { 
     request = new ActiveXObject('Microsoft.XMLHTTP'); 
    } catch (e) { 
     console.log(e); 
    } 
    } 
} 
request.onreadystatechange = function() { 
    if (this.readyState === 4 && this.status === 200) { 
    var json = JSON.parse(this.responseText); 
    let jsonConfig: ConfigService = new ConfigService(); 
    jsonConfig.fromJson(json); 
    /**** How do I pass jsConfig object into my AppModule here?? ****/ 
    platform.bootstrapModule(AppModule); 
    } 
}; 

// Open, send. 
request.open('GET', './config.json', true); 
request.send(null); 

Answer 1

私は同じ問題を抱えていました。あなたがmy Gist :-)を見つけたように見えます

RC 6アップデートまでは、HttpModule sourceをチェックアウトする必要があります。元々現在削除されていたすべてのプロバイダを表示します。HTTP_PROVIDERS私はちょうどそれをチェックアウトし、（それが本当に悪くはない）限りそれはきれいではありません

/**** How do I pass jsConfig object into my AppModule here?? ****/ 
platform.bootstrapModule(AppModule); 

として、次の

function getHttp(): Http { 
    let providers = [ 
    { 
     provide: Http, useFactory: (backend: XHRBackend, options: RequestOptions) => { 
     return new Http(backend, options); 
     }, 
     deps: [XHRBackend, RequestOptions] 
    }, 
    BrowserXhr, 
    { provide: RequestOptions, useClass: BaseRequestOptions }, 
    { provide: ResponseOptions, useClass: BaseResponseOptions }, 
    XHRBackend, 
    { provide: XSRFStrategy, useValue: new NoopCookieXSRFStrategy() }, 
    ]; 
    return ReflectiveInjector.resolveAndCreate(providers).get(Http); 
} 

を思い付いたが、私はさえなかった何かを見つけました知り合いはthis postです。モジュールの内部にの機能を宣言できるように見えます。以下は

function getAppModule(conf) { 
    @NgModule({ 
    declarations: [ AppComponent ], 
    imports:  [ BrowserModule ], 
    bootstrap: [ AppComponent ], 
    providers: [ 
     { provide: Configuration, useValue: conf } 
    ] 
    }) 
    class AppModule { 
    } 
    return AppModule; 
} 

おかげで@peeskillet私はちょうど今

import { ReflectiveInjector, Injectable, OpaqueToken, Injector } from '@angular/core'; 
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/toPromise'; 
import { 
    Http, CookieXSRFStrategy, XSRFStrategy, RequestOptions, BaseRequestOptions, 
    ResponseOptions, BaseResponseOptions, XHRBackend, BrowserXhr, Response 
} from '@angular/http'; 

import { AppComponent } from './app.component'; 
import { Configuration } from './configuration'; 

class NoopCookieXSRFStrategy extends CookieXSRFStrategy { 
    configureRequest(request) { 
    // noop 
    } 
} 

function getHttp(): Http { 
    let providers = [ 
    { 
     provide: Http, useFactory: (backend: XHRBackend, options: RequestOptions) => { 
     return new Http(backend, options); 
     }, 
     deps: [XHRBackend, RequestOptions] 
    }, 
    BrowserXhr, 
    { provide: RequestOptions, useClass: BaseRequestOptions }, 
    { provide: ResponseOptions, useClass: BaseResponseOptions }, 
    XHRBackend, 
    { provide: XSRFStrategy, useValue: new NoopCookieXSRFStrategy() }, 
    ]; 
    return ReflectiveInjector.resolveAndCreate(providers).get(Http); 
} 

function getAppModule(conf) { 
    @NgModule({ 
    declarations: [ AppComponent ], 
    imports:  [ BrowserModule ], 
    bootstrap: [ AppComponent ], 
    providers: [ 
     { provide: Configuration, useValue: conf } 
    ] 
    }) 
    class AppModule { 
    } 
    return AppModule; 
} 

getHttp().get('/app/config.json').toPromise() 
    .then((res: Response) => { 
    let conf = res.json(); 
    platformBrowserDynamic().bootstrapModule(getAppModule(conf)); 
    }) 
    .catch(error => { console.error(error) });