Angular + Azure DevOps(TFS)：替换 environment.ts 文件中的令牌，与环境无关的角度构建

Question

Let's say we have a tokenised environment.ts file like:

export const environment = {
  production: #{production}#
}

where production type must be boolean .

Now, we want to ng build so we get an environment agnostic build, which we can deploy to any environment. When deploying to a specific environment we just replace tokens in main.js or main.*.js (that's where the environment.ts file is bundled).

The problem is, that ng build fails as the above environment.ts has compile tyme errors.

Is there any way how to achieve that? How to produce an environment agnostic angular app build which can be deployed to any environment with any configuration?

PS: this task is used for replacing tokens

Answer 1

This is what I have come up so far:

export const environment = {
   production: !!'#{production}#',
}

When VSTS variable production is not empty then !!'#{production}#' is resolved to true , otherwise to false .

Because VSTS does ignore variables with empty string ( "" ) value. It is important to set the production variable for falsy value as:

according to task settings:

Answer 2

Easiest solution to make your file still compile while using replace token task would be:

export const environment = {
  production: '#{production}#' === 'true'
}

In your pipeline set variable production to value false when not in production (or any value to avoid the task warning you of a undefined variable) and true when in production.