Comment ajouter / définir un environnement Angular 6 angular.json file

Question

Comment spécifier l'environnement à utiliser dans Angular 6? Le fichier .angular-cli.json semble avoir changé en angular.json par rapport aux versions précédentes et avec lui la structure du json contient.

Comment / où dans ce fichier dois-je spécifier les environnements à utiliser?

Answer 1

Ouvrez le fichier angular.json. nous pouvons voir les configurations par défaut, il sera affiché pour la production ajouter un extrait de code pour vos environnements respectifs. ajoutez le fichier environment.dev.ts dans l'environnement pour dev, ajoutez environment.qa.ts pour qa. Nommez comme vous préférez. utilisation

  ng serve --configuration=environment_name
 

nom_environnement - (dev, qa, prod) le même processus peut être suivi pour ng build

 "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
        },
        "dev": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.dev.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": true,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true
        },
        "qa": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.qa.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true
        }
      }
 

Answer 2

J'ai essayé la réponse pour ajouter un nouveau «test» de configuration dans mon application Angular 6, puis j'ai exécuté

 ng serve --configuration=test
 

Et une erreur s'est produite indiquant que le test de configuration est introuvable dans le projet. Regardez dans le fichier angular.json et il y a une autre section sous "build" qui s'appelle "serve". La nouvelle configuration doit être ajoutée à la section de configuration sous "serve" également pour que ng serve fonctionne avec:

 "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "my-app:build"
      },
      "configurations": {
        "production": {
          "browserTarget": "my-app:build:production"
        },
        "test": {
          "browserTarget": "my-app:build:test"
        }
      }
    },
 

Answer 3

Il y a une propriété dans angular.json pour spécifier le fichier à utiliser dans dev et prod et comme d'habitude, vous importez environment.ts dans votre projet pour obtenir ce dont vous avez besoin.

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