Angular2 Ansychronous bootstrapping with external json configuration file

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

Community · Accepted Answer · 2017-05-23 11:47:05Z

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

Thanks @peeskillet - That's what I was missing! I didn't realise you declare the module inside a function either! I got it working as you suggested above.
hi peeskiller, what would configuration.ts contain. just plain service?
@gaurang171 Yea, just a structural representation of the JSON

Collectives™ on Stack Overflow

Angular2 Ansychronous bootstrapping with external json configuration file

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related