How to add/set environment Angular 6 angular.json file

Solution 1:

Open angular.json file. we can see the configurations by default it will be shown for production add code snippet for your respective environments. add environment.dev.ts file in environment for dev, add environment.qa.ts for qa. Name as you prefered. use

 ng serve --configuration=environment_name

environment_name - (dev,qa,prod) same process can be followed for ng build

"configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true
        },
        "dev": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.dev.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": true,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true
        },
        "qa": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.qa.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true
        }
      }

Solution 2:

I tried the answer to add a new configuration 'test' in my Angular 6 app, then ran

ng serve --configuration=test

And got an error saying 'Configuration 'test' could not be found in project'. Look down in angular.json file and there's another section under "build" which is called "serve". The new configuration needs to be added to the configuration section under "serve" also to get ng serve to work with it:

"serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "my-app:build"
      },
      "configurations": {
        "production": {
          "browserTarget": "my-app:build:production"
        },
        "test": {
          "browserTarget": "my-app:build:test"
        }
      }
    },

Solution 3:

In order to set up the environments correctly, we need to let Angular know by adding these to the configuration file angular.json. We will do this by extending the configurations object:

... // angular.json
configurations": {
    "production" {...} // leave as it is,
    "dev": {
        "fileReplacements": [
            {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.dev.ts"
            }
        ]
    }
}

And then, will have to update the serve object:

"serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
        "browserTarget": "<appname>:build"
    },
    "configurations": {
        "production": ... // leave as it is
        "dev": {
            "browserTarget": "<appname>:build:dev"
        }
    }
},

create one more environment file with environment.dev.ts under the src/environment/ directory

and run the below command

ng serve -c=dev

you can also create one command to run this environment separately by adding code below in package.json

"scripts": {
   "start:dev": "ng serve -c=dev --port=4000"
   }
}

here we go

npm run start:dev