将环境配置添加到 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!

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"
        }
      }
    },

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