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

Question

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

• 环境
• 环境调试
• 环境释放

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

在运行npm install和npm run（调试或发布）之前，我正在使用“ 替换令牌 ”任务替换每个调试和发布环境的变量，然后运行webpack打包用于调试或发布环境的文件。

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

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

因此，我要实现的是将调试和发布版本分离。这很简单，我只是为调试和发布重新创建了单独的定义，其中我仅在每个环境中替换变量。第二阶段是实际上从构建管道中删除“替换令牌”任务，并使用“发布变量”部分替换在“发布”中设置的每个环境的变量。webpack在js中构建包后，Angular怎么可能？

Answer 1

最简单和最有效的方法是在你的 Angular Environment 文件中创建令牌，并在你的 Release 中使用一个 Tokenizer 来替换那些被编译到你的 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.在名称前面添加以确保令牌名称不会与包中的现有名称冲突）

在您的发布变量中，为每个环境配置这些变量：

env.displayLeftPanel
env.siteName
env.apiUrl

对于您的发布部署，您将需要如下任务（以下适用于 IIS，但您可以将其用作其他任何内容的路线图）

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

• 构建工件通常被压缩，我们不能在 zip 文件中标记，所以我们必须先解压缩它。
• WebPack 包名称中包含随机 ID（例如：）main.20f8aa2b341c1c2f6442.bundle.js。我们需要获取准确的文件名以传递给我们的 Tokenizer。
• 然后我们只使用一个 Tokenizer，例如“使用 XPath/正则表达式进行标记”

以下是任务：

• IIS Web 应用程序管理
• 解压文件：*.zip 到解压后的文件夹

• PowerShell：获取主包名称。类似于：（您可能需要调整路径）

  $MainBundleFileName = (get-item $(System.DefaultWorkingDirectory)/main.*.bundle.js).FullName; 写主机“##vso[task.setvariable variable=MainBundleFileName;]$MainBundleFileName”

• Tokenizer：在 Main Bundle 上执行变量替换 > $(MainBundleFileName)

• IIS Web App Deploy：解压后的文件夹

Answer 2

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

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

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

配置.json

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

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

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

}

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

配置服务.ts

export let CONFIG: MyConfig;

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

组件.ts

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

全面实施

/sf/answers/3469161041/