How to use environment specific web.config file in angular application

Image

Learn how to use environment specific web.config file in angular application

Angular

This tutorial describes how you can create environment specific web.config file in angular application.

Create new folder named configs inside src , then create subfolder for each environment you have, create web.config file inside each environment folder with environment specific configuration.

Open angular.json file , and add below code in build > configurations section for each environment configuration.

"production": {
              "assets": [  
                "src/assets/",
                "src/i18n/",    
                "src/assets/images/favicon.ico",      
                {
                  "input": "src/configs/prod",
                  "output": "/",
                  "glob": "web.config"
                }
              ]                           
            }

Above code will copy environment specific web.config file at the time of build to dist folder.

Complete configuration section of angular.json will looks like below code snippet. 

"configurations": {
            "production": {
              "assets": [  
                "src/assets/",
                "src/i18n/",    
                "src/assets/images/favicon.ico",      
                {
                  "input": "src/configs/prod",
                  "output": "/",
                  "glob": "web.config"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            },
            "devt": {
              "assets": [  
                "src/assets",
                "src/i18n",        
                "src/assets/images/favicon.ico",  
                {
                  "input": "src/configs/devt",
                  "output": "/",
                  "glob": "web.config"
                }
              ],          
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.devt.ts"
                }
              ]
            },
            "uat": {
              "assets": [  
                "src/assets",
                "src/i18n",          
                "src/assets/images/favicon.ico",
                {
                  "input": "src/configs/uat",
                  "output": "/",
                  "glob": "web.config"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.uat.ts"
                }
              ]
            }
          }

 

Example.

ng build --prod --configuration=dev

above command will copy web.config file from configs>dev folder to dist folder.

 

Widget is loading comments...

Top Articles