将环境变量传递给Angular app

Question

我想配置我的gulp webserver任务，将环境变量传递给angular app。每个团队成员都有自己的运行API的VM，变量会指示基础API URL的Angular应用程序。我试图消除每个团队成员在每次TFS更新后记住编辑配置文件的需要。

我想过只是通过中间件设置响应头，但是javascript看不到当前页面的响应头 - 只有XHR响应的响应头。

所以我尝试通过对Web根目录执行HEAD请求来初始化配置服务，但这需要解析$ http promise，这需要在路由配置中添加解析以确保在尝试使用它之前解析它。 / p>

我尝试通过中间件注入cookie并使用$ cookies服务读取它，但Internet Explorer显然没有看到本地主机＆＃39;作为cookie的有效域名，不读取它们。

那么有什么其他方法可以将环境变量（或其他形式的本地配置）传递到角度应用程序中？

Answer 1

我们已经针对不同的情况以多种方式解决了这个问题。

1. 我们不使用基本网址，只是相对＆＃34; / folder / resource＆＃34;。
2. 我们有一个HttpHandler解析具有自定义扩展名的文件，即＆＃34; .xyz＆＃34;。然后我们有一个名为＆＃34; config.xyz＆＃34;的文件。这只是一个JavaScript文件，类似于： {    baseUrl：[BASE_URL] } 当要求处理程序提供此文件时，处理程序将读取文件并执行替换，然后提供其内容。
3. 为服务API的服务器使用一个假名称。即：thisismylocalfake然后要求开发人员在system32中配置他们的主机文件
4. 有一个gulp任务，当你编译应用程序时，需要一个config.js文件并使用机器名来替换选项2中的标记。

Answer 2

我最终在 gulp-webserver 中添加了中间件来拦截我们的配置服务文件的请求。然后我使用 gulp-replace 和 gulp-respond 直接从流中注入环境变量中的url。没有文件编辑，从技术上讲，它可以工作而无需在项目中使用任何类型的特定于开发人员的代码。