Question

我有一个Angular应用程序，它引用了API的数据。我正在使用Visual Studio Team Services（TFS在线）构建和发布管道以及Azure App Service进行托管。

取决于应用程序在管道中的环境 - Dev - ＆gt;阶段 - ＆gt;产品 - 应用程序应该为其数据使用不同的API。例如，如果它在Dev环境中，它应该引用http://someapi-dev.azurewebsites.net，如果它在Stage中，它应该引用http://someapi-stage.azurewebsites.net。

Dev环境是它自己的Azure App Service。 Stage和Prod环境是同一Azure App Service上的部署槽。当我从Stage发布到Prod时，它是一个简单的插槽交换操作。

问题是我不能在所有环境中携带相同的Angular配置。配置必须更改以反映要使用的正确API。

如何让这种动态变化？当我部署到Dev时，我可以使用命令行步骤覆盖配置文件（例如“move / Y config.dev.json config.json”）。但是，如何在将插槽从Stage转换为Prod？

时执行类似的操作

以下是我在运行时在app.component.ts中加载相应API网址的方法：

ngOnInit() {
    this.http.get('assets/environments/config.json')
    .map(res => res.json())
    .toPromise()
    .then((config) => {
      this.apiSvc.baseUrl = config.urlToApi;
      this.isConfigReady = true;
});

Answer 1

我自己不得不处理这件事。

尝试将config.json从静态文件移动到MVC视图。您可以在RouteConfig.RegisterRoutes方法中设置到.js文件的路由：

  routes.MapRoute(
       name: "configRoute", 
       url: "settings/config.js", 
       defaults: new { controller = "Settings", action="Index" }
   );

执行此操作后，您可以从web.config文件的部分读取数据并将其插入config.json。然后，您就可以将终端设置为应用程序设置。

例如，在将为config.json文件提供服务的Views \ Settings \ index.cshtml中：

  @using System.Configuration

    {
        "endpoint": @ConfigurationManager.AppSettings["configEndpoint"]
    }

在您完成此操作后，它简化了您尝试执行的操作。您现在可以转到Azure Web App中的“应用程序设置”部分，并相应地设置所需的值。如果您只是将应用程序设置标记为插槽设置，则插槽交换也很简单。

Answer 2

在角度应用的src路径中，您必须拥有一个名称为环境的文件夹。在其中你拥有所有环境。所以你只需要导入import { environment } from './environments/environment';。导入路径取决于您的应用配置。因此，您可以获取当前的env并根据该检查调用哪个API。这是环境内容

export const environment = {
  production: true
};

我希望在此基础上你可以获得当前的环境

根据azure部署槽改变角度配置

2 个答案: