VSTS构建-在发布阶段替换Angular4环境变量 [英] VSTS build - replace Angular4 environment variables in Release stage

问题描述

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

• 环境
• Environment.Debug
• 环境.发布

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

我正在使用"替换令牌"任务来替换每个调试和发布环境，在运行 npm install 和 npm run {调试或发布)之前，然后运行webpack打包文件以供调试或发布环境使用.

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

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

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

解决方案

您可以从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)，请将其分配给配置对象

config-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

Currently I have three different environments in Angular4:

• Environment
• Environment.Debug
• Environment.Release

Now, in vsts build pipeline I have set up multi-configuration where one definition prepares artifacts for debug and release:

I am using "Replace tokens" task to replace variables per debug and release environment, before I run npm install and npm run {either debug or release) which then runs webpack to pack files for debug or release environment.

I saw there is an option to replace variables in Release where you can replace variables in your .json file(like appsettings.json):

But problem is when webpack packs source code into one bundle.js I think I cannot use release to replace environment variables? Can I?

So what I want to achieve is decouple debug and release builds. This is simple I just recreate separate definitions for debug and release, where I am only replacing variables per environment. Second stage is to actually remove Replace tokens task from build pipeline and use Release variables section to replace variables per environment set up in Release. How is that possible for Angular after webpack builds bundle in js?

解决方案

You can get your config values out of the environment.xx.ts files and put them into json config files that you'll retrieve at runtime when angular bootstraps.

When releasing, use the token replace task you mentionned to replace the tokens in the json files.

The structure of the json file does not really matter, as long as the structure is the same for the config object client side (to make it easier to use). If the structure is not the same, you just need to transform retrieved data to assign it to your config object.

config.json

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

Then you have a matching class in your angular app

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

}

Once you've retrieved the json data angular side (called jsonData), assign it to a config object

config-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;

Full implementation

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

这篇关于VSTS构建-在发布阶段替换Angular4环境变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！