Azure Devops Angular Environment Variables

Question

At this point, when a commit happens to the Master branch, a build pipeline will generate an artifact based on \"ng build --prod\", so this artifact uses the production conf

Answer 1

There are many ways. I am doing it using "Tokens" My production environment looks like this

export const environment = {
  production: true,
  host: 'https://#{{FLYMARK_MAIN_DOMAIN}}#',
  stripeKey: '#{{STRIPE_KEY}}'
};

So when I build my version is not usable because instead of variables i have tokens.

Then when I do release I do have step to replace tokens. this need to run before you deploy scripts (just modify to your needs)

steps:
- task: qetza.replacetokens.replacetokens-task.replacetokens@2
  displayName: 'Replace tokens in **/Scripts/widgets/**/*.js'
  inputs:
    targetFiles: '**/Scripts/widgets/**/*.js'
    actionOnMissing: fail
    tokenPrefix: '#{{'
    tokenSuffix: '}}#'

This task will find my release variables like FLYMARK_MAIN_DOMAIN, STRIPE_KEY and replace in my js files.

Main benefit is that you build once and can deploy to anywhere just need to replace tokens

PS. Lets say you have dev, staging, prod. Now To dev you deploy after build which is triggered by new push to master, to staging you release when its approved (azure pipeline support that)

So now lets say you have in dev version 100, you decided to push it into staging and your team start testing. After 3 days your development team pushed to master lots of new stuff so on dev you have version 123, but in staging you still have version 100. After team tested in staging you will push same version to production because you are confident, if you will use separate builds for environment when you are ready to deploy to production you have lots of new stuff in master and maybe you are not confident to push it to production. Again each case is different and there is many ways to do it, I just like this way of doing because it suits my projects.

Answer 2

You can add your azure repo as the artifacts to your release pipeline and then move your build pipeline tasks to the test and prod stages in release pipeline to build and deploy your app respectively. Check below steps.

1, Go the release pipeline edit page and click Add in Artifacts part, TO add your azure repo to the release pipeline as artifacts

2, Click Continuous deployment trigger in Artifacts part to enable Continuous deployment trigger and set the branch filter.

3, Create stage Test and stage Prod.

4, Copy your build pipeline tasks to Prod stage. And run ng build env=prod --prod to build your app. And then deploy your app to prod environment.

.

5,Copy your build pipeline tasks to Test stage. And run ng build env=test --prod to build your app. And then deploy your app to test environment.

Hope above helps.