Angular 6: Multiple configurations (twas environments)

Question

Trying to get angular-cli to recognise multiple configurations in angular.json

C:\_dev\myapp>ng serve --configuration development
Configuration 'development' could not be found in project 'myapp'.
Error: Configuration 'development' could not be found in project 'myapp'.

The snippet being:

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

src/environments/environment.development.ts does exist

ng serve --configuration production

works fine

Felix Lemke · Accepted Answer · 2018-07-23T16:24:29.763

There is a configurations entry in the build and in the serve section of the angular.json file. The serve part needs to know about your custom configuration as well. Assuming your configuration name is debug, add it to the serve section as follows

"projects": {
  "myApp": {
     [...]
     "architect": {
       "build": {
         [...]
         "configurations": {
           "production": { [...] },
           "debug": { [...] }
         }
       },
       "serve": {
         [...]
         "configurations": {
           "production": {
             "browserTarget": "myApp:build:production"
           },
           "debug": {
             "browserTarget": "myApp:build:debug"
           }
         }
       }
     }
   }
 }

Don't forget to adjust myApp to your projects name equal to the direct child of the project section in your angular.json. Also both debug's should match your configuration in build section.

Then serve with

ng serve --configuration=debug

thanks ! I was putting everything under build and nothing under serve. Feel so dumm... — Void, Sep 16 '19 at 13:41
Note that all fields in `"options"` (here just `"browserTarget"`, but you may have others such as `"serverTarget"`) should be specified in both options and each configuration — Ollie, Aug 27 '20 at 22:13

score -6 · Answer 2 · answered Jul 26 '18 at 09:50

For Angular 2 - 5 refer the article for step by step solution for using 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.

Angular 6: Multiple configurations (twas environments)

2 Answers2

Linked