How to set environment via `ng serve` in Angular 6

AngularAngular6Angular Cli

Angular Problem Overview


I am trying to update my Angular 5.2 app to Angular 6. I successfully followed instructions in the Angular update guide (including the update of angular-cli to v6), and now I am trying to serve the app via

ng serve --env=local

But this gives me error:

> Unknown option: '--env'

I use multiple environments (dev/local/prod), and this is the way it was working in Angular 5.2. How can I set the environment now in Angular 6?

Angular Solutions


Solution 1 - Angular

You need to use the new configuration option (this works for ng build and ng serve as well)

ng serve --configuration=local

or

ng serve -c local

If you look at your angular.json file, you'll see that you have finer control over settings for each configuration (aot, optimizer, environment files,...)

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

You can get more info [here][1] for managing environment specific configurations.

As pointed in the other response below, if you need to add a new 'environment', you need to add a new configuration to the build task and, depending on your needs, to the serve and test tasks as well.

Adding a new environment

Edit: To make it clear, file replacements must be specified in the build section. So if you want to use ng serve with a specific environment file (say dev2), you first need to modify the build section to add a new dev2 configuration

"build": {
   "configurations": {
        "dev2": {
          
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.dev2.ts"
            }
            /* You can add all other options here, such as aot, optimization, ... */
          ],
          "serviceWorker": true
        },

Then modify your serve section to add a new configuration as well, pointing to the dev2 build configuration you just declared

"serve":
      "configurations": {
        "dev2": {
          "browserTarget": "projectName:build:dev2"
        }

Then you can use ng serve -c dev2, which will use the dev2 config file [1]: https://github.com/angular/angular-cli/wiki/stories-application-environments

Solution 2 - Angular

This answer seems good.
however, it lead me towards an error as it resulted with
Configuration 'xyz' could not be found in project ...
error in build.
It is requierd not only to updated build configurations, but also serve ones.

So just to leave no confusions:

  1. --env is not supported in angular 6
  2. --env got changed into --configuration || -c (and is now more powerful)
  3. to manage various envs, in addition to adding new environment file, it is now required to do some changes in angular.json file:
  • add new configuration in the build { ... "build": "configurations": ... property

  • new build configuration may contain only fileReplacements part, (but more options are available)

  • add new configuration in the serve { ... "serve": "configurations": ... property

  • new serve configuration shall contain of browserTarget="your-project-name:build:staging"

Solution 3 - Angular

You can try: ng serve --configuration=dev/prod

To build use: ng build --prod --configuration=dev

Hope you are using a different kind of environment.

Solution 4 - Angular

Angular no longer supports --env instead you have to use

ng serve -c dev

for development environment and,

ng serve -c prod 

for production.

NOTE: -c or --configuration

Solution 5 - Angular

For Angular 2 - 5 refer the article Multiple Environment in angular

For Angular 6 use ng serve --configuration=dev

> Note: Refer the same article for angular 6 as well. But wherever you find --env instead use --configuration. That's works well for angular 6.

Solution 6 - Angular

You can use command ng serve -c dev for development environment ng serve -c prod for production environment

while building also same applies. You can use ng build -c dev for dev build

Solution 7 - Angular

Use this command for Angular 6 to build

ng build --prod --configuration=dev

Solution 8 - Angular

This works on Angular 12

step 1:

"serve":
  "configurations": {
    "staging": {
      "browserTarget": "projectName:build:staging"
    }

Step 2: npx ng run myapp:serve --configuration=staging

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMartin AdámekView Question on Stackoverflow
Solution 1 - AngularDavidView Answer on Stackoverflow
Solution 2 - Angulargarfunkel61View Answer on Stackoverflow
Solution 3 - Angularamku91View Answer on Stackoverflow
Solution 4 - AngularShilpa SoniView Answer on Stackoverflow
Solution 5 - AngularPrasanth VenkatesanView Answer on Stackoverflow
Solution 6 - AngularShridhar AcharyaView Answer on Stackoverflow
Solution 7 - AngularSateeshView Answer on Stackoverflow
Solution 8 - AngularAshran HaiderView Answer on Stackoverflow