Angularjs2 - 在应用程序启动之前预加载服务器配置 [英] Angularjs2 - preload server configuration before the application starts
问题描述
我正在使用 Angular2 RC5.我希望能够在我的应用程序启动之前加载我的服务器 IP 地址和一些其他配置参数.如何在最新的 RC5 中执行此操作?
I am working with Angular2 RC5. I would like to be able to load my server IP address and some other configuration parameters before my app boots up. How can I do this in the latest RC5?
我看过其他文章,但没有帮助:
I have seen other articles, but they are not helpful:
- 如何在 angular2 中预加载配置文件:此处提供的答案特定于 webpack.我正在使用 systemjs.
- https://medium.com/@hasan.hameed/reading-configuration-files-in-angular-2-9d18b7a6aa4#.m8lontnas:这是针对旧版本的 Angular2.一些使用的类已弃用.
- How to preload a config file in angular2: The answer provided here is specific to webpack. I am using systemjs.
- https://medium.com/@hasan.hameed/reading-configuration-files-in-angular-2-9d18b7a6aa4#.m8lontnas: This is for the older version of Angular2. Some of the classes used are deprecated.
任何帮助将不胜感激.
编辑
我尝试在 app.module.ts 中使用 APP_INITIALIZER,如下所示:
I tried to use the APP_INITIALIZER as follows in my app.module.ts:
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 文件:
This is my config.service.ts file:
import { Config } from "../model/config";
export class ConfigService {
constructor() {
}
load(): Promise<Config> {
let config: Config = new Config("localhost", "5050");
return Promise.resolve(config);
}
}
请注意,我最终将重写 load 以实际读取属性或某些此类文件以加载配置.
Note that I will eventually re-write load to actually read a property or some such file to load configuration.
这是 config.ts 的样子:
This is what config.ts looks like:
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 文件.现在我收到一个错误.以下是更新的文件:
I move on to the next step. Update ConfigService to read a json file using http.get. Now I get an error. Here are the updated files:
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 部分
Here is the providers section in NgModule class
providers: [AuthService,
Title,
appRoutingProviders,
ConfigService,
{
provide: APP_INITIALIZER,
useFactory: (config: ConfigService) => () => config.load(),
deps: [ConfigService, Http],
multi: true
}],
请注意,在 RC6 中,我无法导入 HTTP_PROVIDERS,因为我收到错误,即这些不再在 http 模块中定义.这就是我尝试使用 Http 的原因.
Note that in RC6 I am not able to import HTTP_PROVIDERS since I get the error that these are not defined in the http module anymore. This is why I tried 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
推荐答案
在你的根模块中提供这个
Provide this in your root module
{provide: APP_INITIALIZER, useValue: () => promise, multi: true}]}
其中 () =>promise
是一些调用,它返回一个解析为所需值的 Promise.
where () => promise
is some call that returns a Promise that resolves to the desired value.
另见 如何将后端渲染的参数传递给angular2 bootstrap方法
您可以将服务作为可以存储结果的依赖项传递.
You can pass a service as dependency where you can store the result.
更新
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
这篇关于Angularjs2 - 在应用程序启动之前预加载服务器配置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!