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

Question

How do I specify the environment to use in Angular 6+? The .angular-cli.json file seems to have changed to angular.json from previous versions and with it the structure of the json within.

How/where in this file do I specify the environments to use?

Have a look here https://stackoverflow.com/questions/50174584/how-to-set-environment-via-ng-serve-in-angular-6/50174679#50174679 and here https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/application-environments.md — David, May 13 '18 at 06:32

score 60 · Accepted Answer · answered May 15 '18 at 07:34

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
        }
      }

This is the information I was looking for! The default angular.json file only includes production config so I had no idea how to setup other environments such as dev. — Danoram, May 15 '18 at 10:00
You can use ng build --configuration=environment_name for building. For running using ng serve add code snippet in serve property of angular.json file "serve": { ..... "configurations": { "production": { "browserTarget": "AppName:build:production" }, "environment_name": { "browserTarget": "AppName:build:environment_name" }, } Then use ng-serve --configuration=environment_name — rawoof ahamed, May 15 '18 at 12:07
For dev in Angular 12, for building you've to use the command: "ng build -c development" , for running, if by default "ng serve" is not development then try: "ng serve -c development". For other environment, you've add environment file and mention in angluar.json for "configurations" and "serve", just follow the "production" as example and then in cli to run "ng serve -c " and for building using "ng build-c " — agileDev, Jun 19 '21 at 09:14

score 19 · Answer 2 · answered Jul 27 '18 at 16:27

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"
        }
      }
    },

@DanielNetzer in order to get serve to run like mentioned in the answer, I still need to add this part. — wctiger, Aug 29 '18 at 14:21

score 2 · Answer 3 · answered Jul 02 '20 at 17:05

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

My pleasure I hope this will help others and save their time :) — Hidayt Rahman, Jul 03 '20 at 13:01
@Hidayt Rahman Same like need for json file replace, can you please give some sample — sarangan, May 12 '21 at 07:27

score 0 · Answer 4 · answered May 13 '18 at 06:38

There is a property in angular.json to specify which file to use in dev and prod and as usual, you import environment.ts in your project to get what you need.

"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
        }
      }

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

4 Answers4

Linked