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 mand 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 ?

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 mand 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 ?

• javascript
• angular
• azure-devops
• angular5
• azure-pipelines

Share Improve this question Follow edited Jul 14, 2019 at 7:33 Shayki Abramczyk 42k1717 gold badges109109 silver badges131131 bronze badges asked Jul 12, 2019 at 19:10 HereToLearn_HereToLearn_ 1,18055 gold badges2626 silver badges4949 bronze badges 4

• I think that it's a bad idea to modify any JS code after it was built. There is an option to use an APP_INITIALIZER factory which can get some config from wherever (I get it via http.get from json file in assets folder) where you can set all your environments and their corresponding settings. Then you just need to pick the one you need. – Sergey Commented Jul 12, 2019 at 19:13
• 1 Can APP_INITIALIZER grab variables defined on DevOps Azure for the individual releases ? – HereToLearn_ Commented Jul 12, 2019 at 19:21
• Not sure about that. Try to check it out. – Sergey Commented Jul 12, 2019 at 19:38
• @HereToLearn_ Did you check my answer? – Shayki Abramczyk Commented Jul 22, 2019 at 4:45

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

I agree with Sergey, is not remended 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.