Angular2 Ansychronous bootstrapping con archivo de configuración json externo

Question

He actualizado a angular2 RC6 y quiero cargar un archivo de configuración JSON externo antes de iniciar mi AppModule. Tenía esto funcionando antes de RC5 pero ahora tengo problemas para encontrar una forma equivalente de inyectar estos datos.

/** 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));
});

Esto funcionó bien, pero luchó por cambiar para trabajar con RC6.

Estoy experimentando el siguiente enfoque pero estoy luchando por modificar mi AppModule predefinido con datos cargados:

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

Yo tuve el mismo problema. Parece que te encontraste con mi Gist :-)

En cuanto a la actualización de RC 6, debe consultar la fuente HttpModule . Muestra todos los proveedores que estaban originalmente en HTTP_PROVIDERS ahora eliminados. Acabo de comprobar eso y se me ocurrió lo siguiente

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);
}

Tan lejos como el

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

No es el más bonito (realmente no es tan malo), pero encontré algo que ni siquiera sabía que era posible, de esta publicación . Parece que puedes declarar el módulo dentro de la función.

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

A continuación se muestra lo que solía probar en este momento.

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) });