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

Answer 1

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

Answer 2

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.