Angular2 Ansychronous bootstrapping with external json configuration file - json

Question

I have upgraded to angular2 RC6 and want to load an external JSON config file before bootstrapping my AppModule. I had this working before RC5 but am now having trouble finding an an equivalent way of injecting this data.
/** 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));
});
This worked just fine but struggling to change to work with RC6.
I'm experimenting the following approach but struggling to modify my predefined AppModule with loaded data:
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

I had the same problem. Looks like you came across my Gist :-)
As far as the RC 6 update, you should check out the HttpModule source. It shows all the providers that were originally in the now removed HTTP_PROVIDERS. I just checked that out and came up with the following
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);
}
As far as the
/**** How do I pass jsConfig object into my AppModule here?? ****/
platform.bootstrapModule(AppModule);
It's not the prettiest (it's really not that bad), but I found something I didn't even know was possible, from this post. Looks like you can declare the module inside the function.
function getAppModule(conf) {
#NgModule({
declarations: [ AppComponent ],
imports: [ BrowserModule ],
bootstrap: [ AppComponent ],
providers: [
{ provide: Configuration, useValue: conf }
]
})
class AppModule {
}
return AppModule;
}
Below is what I just used to test right now
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) });