Angularjs2 – 在应用程序启动之前预加载服务器configuration

我正在使用Angular2 RC5。 我希望能够加载我的服务器IP地址和一些其他configuration参数，在我的应用程序启动之前。 我怎样才能在最新的RC5中做到这一点？

我看过其他文章，但是没有帮助：

1. 如何在angular2中预assembly置文件 ：这里提供的答案是特定于webpack的。 我正在使用systemjs。
2. https://medium.com/@hasan.hameed/reading-configuration-files-in-angular-2-9d18b7a6aa4#.m8lontnas ：这是Angular2的旧版本。 一些使用的类已被弃用。

任何帮助将不胜感激。

编辑

我试图在app.module.ts中使用APP_INITIALIZER：

import { NgModule, provide, APP_INITIALIZER } from "@angular/core"; import { ConfigService } from "./shared/services/config.service"; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, routes, FormsModule, HttpModule], providers: [AuthService, Title, appRoutingProviders, ConfigService], bootstrap: [AppComponent , provide(APP_INITIALIZER, { useFactory: (config: ConfigService) => () => config.load(), deps: [ConfigService], multi: true })] }) export class AppModule { } 

这是我的config.service.ts文件：

  import { Config } from "../model/config"; export class ConfigService { constructor() { } load(): Promise<Config> { let config: Config = new Config("localhost", "5050"); return Promise.resolve(config); } } 

请注意，我最终会重新写入负载来实际读取一个属性或一些这样的文件来加载configuration。

这就是config.ts的样子：

 export class Config { constructor( private machine: string, private port: string ) { } private base_url: string = "http://" + this.machine + this.port + "/"; public loginURL: string = this.base_url + "login"; } 

我收到一个编译错误

 public/app/app.module.ts(27,11): error TS2345: Argument of type '{ declarations: (typeof AppComponent ...' is not assignable to parameter of type 'NgModuleMetadataType'. Types of property 'bootstrap' are incompatible. Type '(typeof AppComponent | Provider)[]' is not assignable to type '(Type | any[])[]'. Type 'typeof AppComponent | Provider' is not assignable to type 'Type | any[]'. Type 'Provider' is not assignable to type 'Type | any[]'. Type 'Provider' is not assignable to type 'any[]'. Property '[Symbol.iterator]' is missing in type 'Provider'. 

编辑2

我继续下一步。 更新ConfigService以使用http.get读取json文件。 现在我得到一个错误。 这里是更新的文件：

 export class ConfigService { private config: Config; constructor(private http: Http) { } load(): Promise<Config> { this.http.get("/blah/config.json") .map(res => res.json()) .subscribe((env_data) => { console.log(env_data); }); this.config = new Config("localhost", "5050"); return Promise.resolve(this.config); } getConfig(): Config { return this.config; } } 

这里是NgModule类中的providers部分

  providers: [AuthService, Title, appRoutingProviders, ConfigService, { provide: APP_INITIALIZER, useFactory: (config: ConfigService) => () => config.load(), deps: [ConfigService, Http], multi: true }], 

请注意，在RC6中，我无法导入HTTP_PROVIDERS，因为我得到的错误是这些在http模块中没有定义。 这就是为什么我试过Http。

在运行时，我得到以下错误

 (index):27 Error: Error: Can't resolve all parameters for ConfigService: (?).(…)(anonymous function) @ (index):27 ZoneDelegate.invoke @ zone.js:332 Zone.run @ zone.js:225(anonymous function) @ zone.js:591 ZoneDelegate.invokeTask @ zone.js:365 Zone.runTask @ zone.js:265 drainMicroTaskQueue @ zone.js:497 ZoneTask.invoke @ zone.js:437 

Answer 1

在你的根模块中提供这个

 {provide: APP_INITIALIZER, useValue: () => promise, multi: true}]} 

where () => promise是一个返回一个可以parsing为期望值的Promise的调用。

另请参见如何将从后端呈现的parameter passing给angular2引导方法

您可以将服务作为依赖项传递给可以存储结果的地方。

更新

 export function loadConfig(config: ConfigService) => () => config.load() @NgModule({ declarations: [AppComponent], imports: [BrowserModule, routes, FormsModule, HttpModule], providers: [AuthService, Title, appRoutingProviders, ConfigService, { provide: APP_INITIALIZER, useFactory: loadConfig, deps: [ConfigService], multi: true } ], bootstrap: [AppComponent] }) export class AppModule { } 

更新2

Plunker例子