angularjs - Azure 上的 Angular 2 应用程序读取应用程序设置

Question

我想使用 VSTS CI/CD 将 Angular 2 应用程序部署到不同的 Web 应用程序插槽(例如开发、登台和生产)。每个槽应该指向不同的 Web api。通常情况下，我们会在应用程序中指定三个不同的环境文件，但缺点是我必须使用不同的环境构建三次。

我想要实现的是只有两个版本，开发版和生产版。 dev get 部署到 dev slot，prod build get 首先部署到 staging，然后将相同的构建部署到生产 slot。我可以为每个插槽定义应用程序设置。它们被视为环境变量。

有没有办法从 Angular 2 应用程序中读取这些配置设置，或者我是否遗漏了其他内容？

Answer 1

我不鼓励您将相同的构建单独部署两/三次，因为您会错过生产服务器的代码精简和捆绑。

您可以做的是在 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，并且您可以简单地注入(inject) API_CONFIG 来获取正确的基本 API URL。

但是，如果您想保持相同的构建，您可以执行与上面类似的操作，但在您的 apiFactoryConfig 函数中，您需要一些逻辑来区分环境:例如检查浏览器的基本 azurewebsites.net URL 或类似内容。