How to transform/modify a js file during a release in Azure DevOps

Question

Scenario/Current state: I have an Angular 5 project which is on Azure DevOps. I push to Dev/Test and Prod from same branch (master). I have environment.ts file set up for my build so when I build my project from master it picks up the BaseAPIURL's depending on which environment I am building in. My master branch always using the command using run-script build --env=dev.

What I am trying to achieve: I want to have one Build and multiple "Release" plans for different environment. By default upon build all the angular code is converted to .js files in my "dist" folder. The environment variable is present in main.bundle.js. How can I transform/modify that file during a release ?

Answer 1

I agree with Sergey, is not recommended to do it, but I did it in the past in an angular project.

It's simple, install Replace Tokens extension, in your environment.ts file put a placeholders for the values, for example:

baseUrl = __baseUrl__

In the release pipeline add a variable baseUrl for each environment with different value.

Now in each release environment (stage) add the replace tokens task and configure it to search the pattern __{variable}__:

So do it for all the variables (just add them in the variables tab and put the placeholders in the file).

If you want to use APP_INITIALIZER you can read this post that explain hot to do it with Azure DevOps.