Get Config Parameters before starting components - json

Question

I have a problem with getting the config parameters out of a json file before my app components start. For these components I need the config parameters.
There is no error message, but the app.component.ts is not initiated. Somewhere the execution stops. Reading the json works fine.
functiontest.dev.config.json
{
"name": "DE164813",
"node-uri": "http://localhost:4000"
}
Config.ts
import { Injectable } from '#angular/core';
import { Observable } from 'rxjs/Observable';
import { Http, Response } from '#angular/http';
#Injectable()
export class Config {
private _env: Object
constructor(private http: Http) {
}
load() {
return new Promise((resolve, reject) => {
this.http.get('functiontest.dev.config.json')
.map(res => res.json())
.subscribe((env_data) => {
this._env = env_data;
console.log("got env", this._env);
})
});
}
getEnv(key: any) {
return this._env[key];
}
};
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { DatePickerModule } from 'ng2-datepicker';
import { Config } from './service/Config';
import { APP_INITIALIZER } from '#angular/core';
import {
NgModule,
ApplicationRef
} from '#angular/core';
import {
removeNgStyles,
createNewHosts,
createInputTransfer
} from '#angularclass/hmr';
import {
RouterModule,
PreloadAllModules
} from '#angular/router';
/*
* Platform and Environment providers/directives/pipes
*/
import { ENV_PROVIDERS } from './environment';
import { ROUTES } from './app.routes';
// App is our top level component
import { AppComponent } from './app.component';
import { APP_RESOLVER_PROVIDERS } from './app.resolver';
import { AppState, InternalStateType } from './app.service';
import { HomeComponent } from './home';
import { AboutComponent } from './about';
import { SensorTestComponent } from './sensortest';
import { TestReviewComponent } from './testreview';
import { NoContentComponent } from './no-content';
import { XLargeDirective } from './home/x-large';
import { ContractSelectComponent } from './contractselect/contractselect.component';
// Application wide providers
const APP_PROVIDERS = [
...APP_RESOLVER_PROVIDERS,
AppState
];
type StoreType = {
state: InternalStateType,
restoreInputValues: () => void,
disposeOldHosts: () => void
};
function initConfig(config: Config){
return () => config.load()
}
/**
* `AppModule` is the main entry point into Angular2's bootstraping process
*/
#NgModule({
bootstrap: [ AppComponent ],
declarations: [
AppComponent,
AboutComponent,
HomeComponent,
NoContentComponent,
XLargeDirective,
ContractSelectComponent,
SensorTestComponent,
TestReviewComponent
],
imports: [ // import Angular's modules
BrowserModule,
FormsModule,
HttpModule,
DatePickerModule,
RouterModule.forRoot(ROUTES, { useHash: true, preloadingStrategy: PreloadAllModules })
],
providers: [ // expose our Services and Providers into Angular's dependency injection
ENV_PROVIDERS,
APP_PROVIDERS,
Config,
{
provide: APP_INITIALIZER,
useFactory: initConfig,
deps: [Config],
multi: true
}
]
})
export class AppModule {
constructor(
public appRef: ApplicationRef,
public appState: AppState
) {
}
public hmrOnInit(store: StoreType) {
if (!store || !store.state) {
return;
}
console.log('HMR store', JSON.stringify(store, null, 2));
// set state
this.appState._state = store.state;
// set input values
if ('restoreInputValues' in store) {
let restoreInputValues = store.restoreInputValues;
setTimeout(restoreInputValues);
}
this.appRef.tick();
delete store.state;
delete store.restoreInputValues;
}
public hmrOnDestroy(store: StoreType) {
const cmpLocation = this.appRef.components.map((cmp) => cmp.location.nativeElement);
// save state
const state = this.appState._state;
store.state = state;
// recreate root elements
store.disposeOldHosts = createNewHosts(cmpLocation);
// save input values
store.restoreInputValues = createInputTransfer();
// remove styles
removeNgStyles();
}
public hmrAfterDestroy(store: StoreType) {
// display new elements
store.disposeOldHosts();
delete store.disposeOldHosts;
}
}
app.routes.ts
import { Routes, RouterModule } from '#angular/router';
import { HomeComponent } from './home';
import { ContractSelectComponent } from './contractselect/contractselect.component';
import { SensorTestComponent } from './sensortest';
import { TestReviewComponent } from './testreview';
import { AboutComponent } from './about';
import { NoContentComponent } from './no-content';
import { DataResolver } from './app.resolver';
export const ROUTES: Routes = [
{ path: '', component: ContractSelectComponent },
{ path: 'sensortest/:orderId', component: SensorTestComponent },
{ path: 'testreview', component: TestReviewComponent },
{ path: '**', component: NoContentComponent },
];
contractselect.component.ts
import { Component } from '#angular/core';
import { OrderResource } from '../service/OrderResource';
import { ContractSelect } from './contractselect';
import { Order } from '../model/Order';
import { Router } from '#angular/router';
import { NodeResource } from '../service/NodeResource'
import { NodeData } from '../model/NodeData';
#Component({
selector: 'contractselect',
providers: [OrderResource, NodeResource],
templateUrl: 'contractselect.component.html'
})
export class ContractSelectComponent {
//...
constructor(private _orderResource: OrderResource, private _router:Router, private _nodeResource: NodeResource) {
this.orders = new Array<Order>();
this.orderResource = _orderResource;
this.nodeResource = _nodeResource;
// set delay settings
this.delay = 1;
console.log("created ContractSelect Component");
}
// ...
}

Answer 1

My Angular is a little bit rusty, but I don't think that just because you've specified Config & config.load() as a dependency to the Angular DI framework, it will actually respect it's Promise-based nature and delay construction of components until the Promise is resolved.
Somebody with more Angular experience can probably comment more and provide a solution.
However, you'd be better served with getting that configuration data in a different fashion to the application than an HTTP call. Most probably, application load looks like this:
Client browser makes an HTTP request to your server and gets a webpage + a big bundle of JS, representing the single page Angular app.
Single page app then makes another HTTP request to the server to get the configuration.
Application is initialized based on on the config.
You have an extra HTTP request, which slows down the initial load, and adds all this extra complexity, and doesn't really buy you that much.
You'd be better served with having that data as a constant in your code, perhaps with different values for different environments. It's unlikely you're going to change it often, and in that case, doing a redeploy of your app will probably be done anyway. Depending on how your serving is done, the web server which serves the javascript could bake the values straight into the JS, dependent on it's configuration. It's much easier to control the environment and configuration of server-side components.