Angular project - Azure DevOps - 3 Environment files. In the yaml file, where do I put the variable that designates which environment file to use?

Issue

Angular 12 I have 3 environment files environment.dev.ts environment.prod.ts environment.ts

I have 2 jobs in my yaml file. Build_Dev and Build_Prod

Here is my yaml file:

azure-pipelines.yml

name: $(date:yyyyMMdd)$(rev:.r)

trigger:
  - master

variables:
  baseHref: ""
  environmentName: "dev"
  prodEnvironmentName: "prod"
  nodeVersion: 12.14

jobs:
  - job: Build_Dev
    steps:
      parameters:
        environmentName: 'dev'
      - task: NodeTool@0
        displayName: "Use Node Version"
        inputs:
          versionSpec: ${{variables.nodeVersion}}
      - task: Npm@1
        displayName: "npm install"
        inputs:
          verbose: false
      - task: Npm@1
        displayName: "npm run build"
        condition: and(succeeded(), eq('${{variables.baseHref}}', ''))
        inputs:
          command: custom
          verbose: false
          customCommand: "run build -- --output-path=dist/${{variables.environmentName}} --verbose"
      - task: ArchiveFiles@2
        displayName: "Archive dist folder"
        inputs:
          rootFolderOrFile: dist/${{variables.environmentName}}
          includeRootFolder: false
          archiveFile: "$(Build.ArtifactStagingDirectory)/${{variables.environmentName}}/$(Build.BuildId).zip"
      - task: PublishBuildArtifacts@1
        displayName: "Publish Artifact"
        inputs:
          PathtoPublish: "$(Build.ArtifactStagingDirectory)/${{variables.environmentName}}"
          ArtifactName: ${{variables.environmentName}}
  - job: Build_Prod
    steps:
      - task: NodeTool@0
        displayName: "Use Node Version"
        inputs:
          versionSpec: ${{variables.nodeVersion}}
      - task: Npm@1
        displayName: "npm install"
        inputs:
          verbose: false
      - task: Npm@1
        displayName: "npm run build"
        condition: and(succeeded(), eq('${{variables.baseHref}}', ''))
        inputs:
          command: custom
          verbose: false
          customCommand: "run build -- --output-path=dist/${{variables.prodEnvironmentName}} --verbose"
      - task: ArchiveFiles@2
        displayName: "Archive dist folder"
        inputs:
          rootFolderOrFile: dist/${{variables.prodEnvironmentName}}
          includeRootFolder: false
          archiveFile: "$(Build.ArtifactStagingDirectory)/${{variables.prodEnvironmentName}}/$(Build.BuildId).zip"
      - task: PublishBuildArtifacts@1
        displayName: "Publish Artifact"
        inputs:
          PathtoPublish: "$(Build.ArtifactStagingDirectory)/${{variables.prodEnvironmentName}}"
          ArtifactName: ${{variables.prodEnvironmentName}}

Both jobs run fine, other than the fact that they both pull from the environment.ts file.

I can't figure out where to add the parameter in each job to specify which environment file to use.

environment.ts

export const environment = {
  production: false,
  development: false,
...
}

environment.dev.ts

export const environment = {
  production: false,
  development: true,
...
}

environment.prod.ts

export const environment = {
  production: true,
  development: false,
...
}

Solution

To solve your problem -

Where do I put the variable that designates which environment file to use?

First organize your pipeline into multiple stages, using the stages keyword. Multi-stage pipelines are the new way to configure your release via code and it helps you to logically divide your pipeline.

Normally, you can set up a multi-stage pipeline that contains the main processes for your application, such as "Build", "Test" and "Deploy". And like release pipeline, you also can set a stage for each deployment environment in the same pipeline.

stages:
- stage: Build
  jobs:
  - job: A1

- stage: Deploy_dev
  jobs:
  - job: B1
...
...

After that add the replacement tokens in your environment files which we can utilize during our deployment stages to replace the tokens with the actual values.

// environment.prod.ts
export const environment = {
  production: true,
  auth: {
    clientID: '#{authClientID}#',
    domain: '#{authDomain}#',
  },
  apiEndpoint: '#{apiEndpoint}#',
};

And install the Replace Tokens extension needs at organization level to replace the tokens we used above.

Now create two variable groups to store the actual variables that will be used to substitute the tokens for your Dev and Prod. Go to Library section of the pipeline and add this variable groups. Then lastly add replace token task to replace them with actual value.

I would suggest to read this How to use Angular environment files in your Azure DevOps multi-stage yml release pipeline for detailed step by step procedure. And also check this similar thread raised in stack overflow.

Answered By - SauravDas-MT