Json 在启动组件之前获取配置参数

在我的应用程序组件启动之前，我无法从json文件中获取配置参数。对于这些组件，我需要配置参数

没有错误消息，但app.component.ts未启动。在某个地方执行停止。阅读json很好

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

};

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

}

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 },
];

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

// ...
}

应用程序模块.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];
    }

};

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

}

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 },
];

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

// ...
}

应用程序路由.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];
    }

};

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

}

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 },
];

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

// ...
}

合同选择.component.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];
    }

};

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

}

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 },
];

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

// ...
}

从'@angular/core'导入{Component}；
从“../service/OrderResource”导入{OrderResource}；
从“/ContractSelect”导入{ContractSelect}；
从“../model/Order”导入{Order}；
从'@angular/Router'导入{Router}；
从“../service/NodeResource”导入{NodeResource}
从“../model/NodeData”导入{NodeData}；
@组成部分({
选择器：“contractselect”，
提供程序：[OrderResource，NodeResource]，
templateUrl:'contractselect.component.html'
})
导出类ContractSelectComponent{
//...
构造函数（private orderResource:orderResource，private router:router，private nodeResource:nodeResource）{
this.orders=新数组（）；
this.orderResource=\u orderResource；
this.nodeResource=\u nodeResource；
//设置延迟设置
这个延迟=1；
log（“创建的ContractSelect组件”）；
}
// ...
}

我的Angular有些生疏，但我不认为仅仅因为您指定了

Config

&

Config.load（）

作为Angular DI框架的依赖项，它实际上会尊重它基于承诺的性质，并延迟组件的构建，直到承诺得到解决

---

有更多角度经验的人可能会多加评论并提供解决方案

但是，与HTTP调用相比，以不同的方式向应用程序获取配置数据会更好。最可能的情况是，应用程序负载如下所示：

• 客户端浏览器向您的服务器发出HTTP请求，并获得一个网页+一大包JS，代表单页Angular应用程序
• 然后，单页应用程序向服务器发出另一个HTTP请求以获取配置
• 应用程序根据配置进行初始化

您有一个额外的HTTP请求，这会减慢初始负载，并增加所有这些额外的复杂性，并且不会给您带来太多好处

---

最好在代码中将该数据作为常量，可能在不同的环境中使用不同的值。你不太可能经常更改它，在这种情况下，重新部署你的应用程序很可能会完成。根据您的服务方式，服务javascript的web服务器可以直接将值烘焙到JS中，具体取决于它的配置。控制服务器端组件的环境和配置要容易得多。

您可以使用canactivate，使用get参数初始化服务