Quelle est la bonne façon d’ajouter une configuration d’environnement à angular.json?

Question

Je viens de mettre à jour angular cli vers la version 6. Et bien sûr, mon application est en panne et j'ai essayé de consulter des documents et des questions SO pour essayer de déterminer comment ajouter un environnement à angular.json? Je veux pouvoir exécuter l'équivalent de ng serve --env = local, puis lui faire exécuter une construction locale sur le serveur local ... Je suis arrivé en partie et mon fichier angular.json ressemble à ceci ...

{
  "$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"
}

Mais quand je lance ng serve --configuration = local

Je reçois l'erreur.

ERREUR dans l'un ou l'autre des itinéraires ou des modules analysés doit être spécifié!

Quelle en est la cause, comment puis-je exécuter un fichier d’environnement différent pour la construction et l’exécution locale du serveur cli? Merci!

Answer 1

D'après ce que j'en sais, ce n'est pas encore vraiment documenté. Cependant, vous devriez pouvoir remplacer les options de construction que vous spécifiez avec browserTarget. Vous pouvez également spécifier une autre configuration de construction dans la section de commande de construction. 

Les meilleurs "documents" que j'ai trouvés jusqu'ici sont ici https://blog.ninja-squad.com/2018/05/04/angular-cli-6.0/

MISE À JOUR: Il existe un problème pour ce problème, https://github.com/angular/angular-cli/issues/10612

En outre, certains documents peu étonnants https://github.com/angular/angular-cli/wiki/angular-workspace . Pour l'instant, vous devez spécifier chaque configuration individuellement, quelles que soient les options qui se chevauchent. La seule "solution de contournement" à laquelle je peux penser est d'utiliser un autre utilitaire pour fusionner des fichiers json conservés/construits.

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

Answer 2

J'ajoute dans package.json sous "scripts" quelque chose comme

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

Puis-je ajouter à angular.json sous "configurations"

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

et sous "servir"

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

Je lance l'application avec: 

npm run myscript

Bien sûr, vous devez créer un fichier appelé environment.local.ts