在应用程序启动之前预加载服务器配置的Angularjs2
在应用程序启动之前预加载服务器配置的Angularjs2
我正在使用Angular2 RC5。我想在我的应用程序启动之前能够加载服务器IP地址和一些其他配置参数。在最新的RC5版本中，我应该如何做到这一点？
我看过其他的文章，但它们对我没有帮助：
- 如何预加载angular2中的配置文件：这里提供的答案只适用于webpack。我正在使用systemjs。
- 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
let config: Config = new Config("localhost", "5050");
return Promise.resolve(config);
}
}
请注意，我最终将重写load函数以实际读取属性或某个文件来加载配置。
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
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
问题的出现的原因是在AngularJS2应用程序启动之前，需要预加载服务器配置。这样可以确保应用程序在启动时具有所需的配置信息。
解决方法是提供一个根模块，并在其中提供一个具有以下属性的对象：
{provide: APP_INITIALIZER, useValue: () => promise, multi: true}
其中`() => promise`是一个调用，返回一个解析为所需值的Promise。
update部分中提供了一个名为`loadConfig`的函数，并在根模块中使用了`useFactory`属性：
{ provide: APP_INITIALIZER, useFactory: loadConfig, deps: [ConfigService], multi: true }
这样可以确保在应用程序启动之前加载配置。
问题的解决方法是确保在应用程序启动之前加载服务器配置，以便应用程序具有所需的配置信息。通过提供根模块并使用`APP_INITIALIZER`属性，可以实现在应用程序启动之前预加载服务器配置。