Replacing variables in an angular app using Replace Token extension.

In this post, I am going to talk about the Replace Tokens extension, which I have found to be useful for dynamically replace values at build time. For instance, I have used it to display the build number which comes from azure build pipelines in an angular application.

Making the build number readily available to both programmers and non programmers such as business system analysts (BSA) and end users has a couple of benefits. For instance, by displaying the build number in the app, the analysts can quickly tell whether they are testing the expected build after a deployment. As a developer, I often find myself wondering why certain features work on one environment and not the other. Seeing the build number in the app allows me to quickly check whether an issue has to do with the codes or the environment.

Azure Devops provides an easy way to assemble the build number. You can see the options to edit the build number in your build pipelines, under the Options tab.

Check out this document for more details on the available patterns for build number. For instance, the below pattern generates a build number that consists of the source name and the date and time when the build was made.

$(Build.SourceBranchName)_$(date:yyyyMMdd)T$(Hours)$(Minutes)$(Seconds)

To use the extension, first check and install the extension as necessary. You can find more about the extension from Visual Studio marketplace. The link also describes the various configurations to give you ideas on how to use the extension.

It is fairly straightforward to make the info available in the app using the Replace Tokens extension. For instance, below I show how I use the extension to bake the build number into the angular application.

• Add a Replace Token task in the build process.
• Configure the task to replace variable in the environment.prod file

• In the angular app, the environment.prod.ts file looks like below:

export const environment = {
   production: true,
   VERSION: "#{Build.BuildNumber}#"
 };

The Build.BuildNumber is one of the predefined variables of azure devops. Once you have this setup, you can just reference the variable in your component and template files.

import { Component, OnInit } from '@angular/core';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-version',
  template: '<p>{{version}}</p>',
  styleUrls: ['./version.component.scss']
})
export class VersionComponent implements OnInit {

  version:string=environment.VERSION;
  constructor() { }
  ngOnInit() {
  }
}

In this post, I have shown an example of using the Replace Token to set the build number which comes from the azure build pipeline in the angular app. As the next step, I am going to see how to use the extension in the release pipeline to dynamically set the parameters for authenticating against azure active directory based on the target environment.

References

Replace Token extension

Install free extension