Angular2启动时从后端加载配置

在我的Angular2应用程序中，我尝试使用HTTP从后端引导加载配置，以便使用提取的数据创建Angular2服务

每当我试图读取保存在配置中的HTTP响应时，我总是得到类型错误：无法读取未定义的属性“url”错误

看起来HTTP请求只有在整个引导方法完成时才完成，而我的代码试图在检索之前提取可观察到的响应

如何修复它以从服务器提取配置，并在启动时使用它创建angular服务？（我想使用提取的数据在提供商内部创建服务）

若有更好的方法在启动时从服务器中提取配置，请发表意见

我的main.ts如下所示：

bootstrap（AppComponent，
[应用程序\路由器\提供程序、HTTP\提供程序、配置服务、配置]）
.catch（err=>console.error（err）
);

配置.service.ts

@Injectable（）
导出类配置服务{
构造函数（专用http:http）{
}
加载（）{
返回这个.http.get（'config/getConfig'）.map（response=>response.json（））；
}
}

config.ts

@Injectable（）
导出类配置{
公共配置；
构造函数（公共配置服务：配置服务）{
configurationService.load（）.subscribe(
config=>this.config=config，
error=>console.error（'error:'+error）
);
}
获取（键：任意）{
返回此.config[key]；
}
}

应用程序组件.ts

@组件({
选择器：“应用程序”，
templateUrl:'app/app.component.html'，
样式URL:['app/app.component.css']，
指令：[路由器指令]，
提供者：[MyService]
})
导出类AppComponent{
构造函数（公共myService:myService）{
}
}

my.service.ts

@Injectable（）
导出类MyService{
私有url；
构造函数（公共配置：config）{
this.url=config.get（'url'）；
}
}

您可以在应用程序启动之前利用

APP\u初始值设定项

服务重新加载配置：

bootstrap（AppComponent[
{
提供：应用程序初始化器，
useFactory：（config:config）=>{
返回config.load（）；
},
依赖项：[Config]
}
]);

为此，您需要稍微调整

ConfigService

类：

@Injectable（）
导出类配置服务{
构造函数（私有http:http）{}
加载（）{//{
this.http.get（…）.map（res=>res.json（））
.subscribe（配置=>{
this.config=config；
解决（）；
});
}
}

---

然后，您将能够直接访问应用程序中配置对象的属性。

使用AoT编译时会抛出错误，因为工厂是匿名函数。然后您需要做的是为工厂导出函数

导出函数ConfigLoader（configService:configService）{ return（）=>configService.load（）； } 应用程序的配置如下所示：

@NgModule({
声明：[
应用组件
],
进口：[
HttpModule，
浏览器模块
],
供应商：[
配置服务，
{
提供：应用程序初始化器，
useFactory:ConfigLoader，
副秘书：[配置服务]
}],
引导：[AppComponent]
})
导出类AppModule{
}

---

参考

这是编写加载函数的更好方法

公共加载（）{
让promise=this.http.get（url.map（res=>res.json（））.toPromise（）；
然后（config=>this.validation=config）；
回报承诺；
};

从错误中可以清楚地看到，请再次查看您的

url

，这是未定义的一个好教程我有一个非常类似的要求，我遵循了上面的技巧。但是，我发现

load（）

函数是在

ngOnInit（）之前调用的
app.component.ts
的

，但配置数据是在之后加载的。如果我想在

ngOnInit

之前加载配置，该怎么办？+1请忽略我之前的评论。今天，当我清理node\u模块文件夹并重新安装所有库时，它开始按正确的顺序工作。您就是@thierri，我已经创建了一个plu角度为2.0的nkr（最终）。顺便说一句，为什么加载（）返回一个值，谁得到这个值，为什么？对我来说，没有它它就可以完美地工作。如何在Angular4中实现它？这有什么更好的？这将如何处理相对/绝对url路径？答案是从2017年开始，我不再使用angularjs。我想从那时起，angularjs就有了新版本