Question

目前我在Angular4中有三种不同的环境：

环境
Environment.Debug
Environment.Release

现在，在vsts构建管道中，我已经设置了多配置，其中一个定义为调试和释放准备工件：

我运行“Replace tokens”任务来替换每个调试和发布环境的变量，然后运行 npm install 和 npm run {debug或release）然后运行webpack以打包调试或发布环境的文件。

我看到在Release中有一个替换变量的选项，您可以在其中替换.json文件中的变量（如appsettings.json）：

但问题是webpack将源代码打包成一个bundle.js我想我不能用release来替换环境变量？我可以吗？

所以我想要实现的是解析调试和发布版本。这很简单我只是为调试和发布重新创建单独的定义，其中我只替换每个环境的变量。第二阶段是从构建管道中实际删除Replace tokens任务，并使用Release variables部分替换Release中设置的每个环境的变量。在webpack在js中构建bundle后，Angular的可能性如何？

Answer 1

您可以从environment.xx.ts文件中获取配置值，并将它们放入json配置文件中，这些文件将在角度引导时在运行时检索。

发布时，使用您提到的令牌替换任务来替换json文件中的令牌。

json文件的结构并不重要，只要配置对象客户端的结构相同（使其更易于使用）。如果结构不相同，您只需要转换检索到的数据以将其分配给配置对象。

<强> config.json

{
  "envName": "@@envName@@",
  "ApplicationInsights": { "InstrumentationKey": "@@xxx@@" }
}

然后你的角应用程序中有一个匹配的类

export class MyConfig
{
  readonly envName: string;
  readonly ApplicationInsights:
  {
      readonly InstrumentationKey: string
  }

}

一旦检索到json数据角度侧（称为jsonData），将其分配给配置对象

<强>配置-service.ts

export let CONFIG: MyConfig;

//Modify jsonData if needed
let t = new MyConfig();
CONFIG = Object.assign(t, jsonData);

<强> component.ts

import {CONFIG} from '../config-service.ts';
//...
//use it
let url = CONFIG.ApplicationInsights.InstrumentationKey;

全面实施

https://stackoverflow.com/a/49559443/1160794

Answer 2

最简单，最有效的方法是在Angular Environment文件中创建令牌，并在Release中使用令牌生成器替换那些已编译到您的Main Bundle中的令牌。使用这种方法，您现有的代码都无需更改。

这意味着您将在CI / CD所属的环境变量中而不是您的项目中对其进行管理。（您的项目仍然需要默认的环境文件才能在本地运行，可能还需要其他环境文件来本地测试）

为此，首先创建一个用于部署的Angular环境，例如environment.deploy.ts。这就是您的版本将使用的版本（仅一个版本，多个版本）。

下面是一个示例environment.deploy.ts：

export const environment = {
  displayLeftPanel: "__env.displayLeftPanel__".toLowerCase() === "true",
  siteName: "__env.siteName__",
  apiUrl: "__env.apiUrl__",
};

（我在名称前添加了env.，以确保令牌名称不会与捆绑软件中的现有名称冲突）

在您的Release Variables中为每个环境配置以下变量：

env.displayLeftPanel
env.siteName
env.apiUrl

对于您的发行版部署，您需要执行以下任务（以下是针对IIS的任务，但是您可以将其用作其他路线图）

以下任务解决了以下问题：

通常会压缩构建工件，并且我们无法在zip文件中标记化，因此我们必须先将其解压缩。
WebPack捆绑包名称中具有随机ID（例如：main.20f8aa2b341c1c2f6442.bundle.js）。我们需要获取确切的文件名才能传递给Tokenizer。
然后，我们仅使用诸如“使用XPath /正则表达式进行标记化”之类的标记化器

以下是任务：

IIS Web App管理
解压缩文件：* .zip到未解压缩的文件夹
PowerShell：获取主捆绑包名称。类似于：（您可能需要调整路径）

$ MainBundleFileName =（获取项$（System.DefaultWorkingDirectory）/ main。*。bundle.js）.FullName; 写主机“ ## vso [task.setvariable variable = MainBundleFileName;] $ MainBundleFileName”
令牌生成器：在Main Bundle> $（MainBundleFileName）
IIS Web App Deploy：解压缩的文件夹

VSTS构建 - 在Release阶段替换Angular4环境变量

2 个答案: