我想使用 VSTS CI/CD 将 Angular 2 应用程序部署到不同的 Web 应用程序插槽（比如说 dev、staging 和 prod）。每个插槽应指向不同的 Web api。通常会在应用程序中指定三个不同的环境文件，但缺点是我必须使用不同的环境构建三次。
我想要实现的是只有两个版本，dev 和 prod。 dev get 部署到 dev slot，prod build get 先部署到 staging，然后同一个 build 应该部署到 production slot。我可以为每个插槽定义应用程序设置。它们被视为环境变量。
有没有办法从 Angular 2 应用程序中读取这些配置设置，还是我错过了其他东西？
【问题讨论】：
标签： angularjs azure azure-deployment-slots
我不鼓励您将相同的构建单独部署两/三次，因为您会错过生产服务器的代码缩小和捆绑。
您可以做的是在 VSTS 中设置构建任务：例如，您可以在将代码推送到生产分支时运行 npm your-build-task --prod，并在推送时简单地运行 npm yourbuild-task掌握或开发分支等。
在您的 AppModule（或您的服务所在的任何模块）中，您可以设置以下内容：
providers: [
...
{
provide: API_CONFIG, useFactory: apiConfigFactory
}
...
]
...
export function apiConfigFactory() {
if (environment.production) {
return MY_PROD_API_CONFIG;
} else {
return MY_DEV_API_CONFIG;
}
}
这样，您可以在每个配置对象中设置基本 URL：一个指向 prod，一个指向 dev，您只需注入 API_CONFIG 即可获取正确的基本 API URL。
但是，如果你想保持相同的构建，你可以在上面做类似的事情，但是在你的 apiFactoryConfig 函数中，你需要一些逻辑来区分环境：比如检查浏览器的基础 @ 987654325@ URL 或类似的东西。
【讨论】：
只有后端语言可以在运行时将 APP 设置作为环境变量访问。由于 Angular 2 在前端，我们不能直接从前端读取这些设置。一种解决方法是通过暴露端点的后端读取应用程序设置，然后通过 Angular 2 应用程序中的 AJAX 调用访问该端点。
您可以查看my earlier post，我在其中发布了 PHP 示例代码以阅读 APP 设置。
【讨论】：