angularangular6angular-cli

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


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?


Solution

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

    You may need to delete .angular to make the new environment visible.