How to change enviroment settings in VSTS Release Management

Question

I want to use VSTS Release Management to deploy my Web Application to my different deployment locations (dev, test, prod). At the moment I use different build to solve my problem but i want to have one single build and then I want deploy to dev, test and prod step by step using the Release Management but deploying always the same build. My Problem is, that for my AngularCLI application I have different build script in the package.json file:

"build:prod": "ng build --prod",
"build:dev": "ng build --dev",
"build:test": "ng build --test",

With this I set the different environments defined in the environment.*.ts files. Using different builds I can use different build script like npm run build:prod for production. The same problem I have on different web.config transformations in my webapi. What is the best way to have a single build and different steps in the release management do deploy to the different environments with the right configurations?

Answer 1

I don't know VSTS, but if the main thing blocking you is that the environment*.ts files are included statically in the build (and that you need to explicitely specify which one to use), you could instead have your config in a conf.json file in the assets folder, and then make a http call when the angular app starts to retrieve that conf.json file.

The conf.json file is the one that will be modified (up to you how) AFTER the ng build, when deploying.

Answer 2

You can execute ng build command for three times (three tasks) in your build definition:

ng build --prod
ng build --dev
ng build --test

Then in your release definition, add three environments to deploy your app to different environments.

Answer 3

We have 3 environments, but we run only ng build, so how we handle the release environments?

When you run ng build --test/prod/etc. the file main.bundle.js get different values on specific places according to the environment configurations file, so in our release pipeline we replace the values on the main.bunble.js file according to the correct environment.

You can replace the values with Powershell script or with Replace task.