How can I configure Angular to recognize which environment (dev or prod) to use based on the deployed web app service? What is the best approach to ensure the correct environment settings are applied dynamically during deployment?

To configure Angular to recognize whether to use the dev or production environment based on the deployed web app service, follow the steps below:

• Create two environment files one for Production environment.prod.ts and another one for Development environment.dev.ts.

• Use fileReplacements configuration in angular.json file:

 "configurations": {
           "production": {
             "fileReplacements": [
               {
                 "replace": "src/environments/environment.ts",
                 "with": "src/environments/environment.prod.ts"
               }
             ],
             "outputHashing": "all",
             "budgets": [
               {
                 "type": "initial",
                 "maximumWarning": "500kB",
                 "maximumError": "1MB"
               },
               {
                 "type": "anyComponentStyle",
                 "maximumWarning": "4kB",
                 "maximumError": "8kB"
               }
             ]
           },
           "development": {
             "optimization": false,
             "extractLicenses": false,
             "sourceMap": true
           },
           "dev": {
             "fileReplacements": [
               {
                 "replace": "src/environments/environment.ts",
                 "with": "src/environments/environment.dev.ts"
               }
             ],
             "optimization": false,
             "outputHashing": "none",
             "sourceMap": true,
             "extractLicenses": false
           }
         },

• Configure build command in YAML file based on the branch or App service:

 - name: Build Angular app with dev config
  run: npm run build -- --configuration=dev
  
 - name: Build Angular app with production config
   run: npm run build -- --configuration=production

• In two Azure Web Apps set below Environment variable in Environment Variable section.

ENVIRONMENT=dev 
ENVIRONMENT=prod

Azure Output: