What is the right way to add an environment configuration to angular.json?

Question

I just updated angular cli to version 6. And of course my app is broken and have been trying to look at docs and SO questions trying to figure out how to add an environment to angular.json? I want to be able to run the equivalent of ng serve --env=local and then have it run a local build in the local server... I have come part way and my angular.json file looks like this...

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "bb-admin": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "sass"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/bb-admin",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.sass"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            },
            "local": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.local.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "bb-admin:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "bb-admin:build:production"
            },
            "local": {
              "browserTarget": "bb-admin:build:local"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "bb-admin:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.sass"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "bb-admin-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "bb-admin:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "bb-admin"
}

But when I run ng serve --configuration=local

I get the error.

ERROR in Either route or analyzedModules has to be specified!

What's causing this how can I run a different environment file for building and running the cli server locally? Thanks!

Roadster

Have a look at my post here. In angular 6 the environments are called configurations. – Tasset

Answer 1

AFAIK This is not really documented anywhere yet. However you should be able to override the build options you specify with browserTarget. Alternatively, specify another build config in the build command section.

Best "docs" I've found so far are here https://blog.ninja-squad.com/2018/05/04/angular-cli-6.0/

UPDATE: There's an issue for this issue, https://github.com/angular/angular-cli/issues/10612

Also some not-especially-amazing docs https://github.com/angular/angular-cli/wiki/angular-workspace. For now you must specify each config individually, regardless of overlapping options. The only "workaround" I can think of for this is to use some other utility to merge json files pre serve/build

    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "bb-admin:build"
      },
      "configurations": {
        "local": {
          "browserTarget": "bb-admin:build:local"
        }
      }
    },

Lumberman

I gave up trying to get local to work ... ng serve works, so I ma just gonna use that ... but I get the same error when I run ng build --configuration=production ....Any ideas there? Or should I just check the same article. – Roadster

This is ridiculous. I think I am just gonna revert back to the previous version of the CLI until better docs are written. – Roadster

Answer 2

I add in package.json under "scripts" something like

"myscript": "ng serve -c local-version"

Than I add to angular.json under "configurations"

"local-version": {
            "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.local.ts"
                }
            ]
        }

and under "serve"

"configurations": {
        "local-version": {
          "browserTarget": "your-app:build:local-version"
        }

I start the app with:

npm run myscript

Of course you have to create a file called environment.local.ts

Moa