CODEWITHSUNDEEP
angularangular6
Daniel Oram
Daniel Oram

Reputation: 8411

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

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?

Upvotes: 54

Views: 33695

Answers (4)

Hidayt Rahman
Hidayt Rahman

Reputation: 2678

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

Upvotes: 2

wctiger
wctiger

Reputation: 1061

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

Upvotes: 19

rawoof ahamed
rawoof ahamed

Reputation: 1049

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

Upvotes: 60

Joshua Chan
Joshua Chan

Reputation: 1847

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

Upvotes: 0

Related Questions