CODEWITHSUNDEEP
angularangular-cliangular6
jenson-button-event
jenson-button-event

Reputation: 18961

Angular 6: Multiple configurations (twas environments)

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

Upvotes: 38

Views: 19739

Answers (2)

Prasanth Venkatesan
Prasanth Venkatesan

Reputation: 93

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.

Upvotes: -6

Felix Lemke
Felix Lemke

Reputation: 6488

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

Upvotes: 65

Related Questions