如何在Angular 6的angular.json文件中添加/设置环境变量

Question

如何指定使用哪个环境在 Angular 6+ 中？.angular-cli.json 文件似乎已经从之前的版本更改为 angular.json，并且其中的 json 结构也随之改变。

我该在这个文件的哪里指定要使用的环境？

- Danoram

---

请查看这里 https://dev59.com/llUL5IYBdhLWcg3wjIlQ#50174679 和这里 https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/application-environments.md - David

Answer 1

打开angular.json文件。我们可以看到默认情况下的配置将显示为生产环境，添加适用于您不同环境的代码片段。为开发环境添加environment.dev.ts文件，在环境中添加environment.qa.ts文件以用于QA。根据您的喜好进行命名。

 ng serve --configuration=environment_name

环境名称 - （开发，质量保证，生产），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
        }
      }

- rawoof ahamed

---

这正是我一直在寻找的信息！默认的 angular.json 文件只包含生产环境配置，因此我不知道如何设置其他环境，比如开发环境。 - Danoram

以及如何在 angular-cli 中设置环境 - Danoram

你可以使用"ng build --configuration=environment_name"进行构建。 如果要运行，请在angular.json文件的serve属性中添加代码片段。 “serve”：{ ..... “configurations”：{ “production”：{ “browserTarget”：“AppName：build：production” }， “environment_name”：{ “browserTarget”：“AppName：build：environment_name” }， } 然后使用“ng-serve --configuration=environment_name”。 - rawoof ahamed

对于 Angular 12 的开发者，构建应使用命令："ng build -c development"，运行时如果默认的 "ng serve" 不是开发环境，则尝试："ng serve -c development"。对于其他环境，您需要添加环境文件并在 angluar.json 中提及 "configurations" 和 "serve"，只需按照 "production" 的示例操作，然后在 cli 中运行 "ng serve -c <your environment file name>"，构建时使用 "ng build-c <your environment file name>"。 - agileDev

Answer 2

我尝试在我的 Angular 6 应用程序中添加一个名为 "test" 的新配置，然后运行

ng serve --configuration=test

出现错误，提示项目中找不到配置项“test”。 在angular.json文件中向下查找，在“build”下面还有一个名为“serve”的部分。为了让ng serve正常工作，还需要在“serve”下的配置部分添加新的配置项：

并得到一个错误，说“Configuration 'test' could not be found in project”。在 angular.json 文件中往下找，可以找到“build”下面的另一部分称为“serve”。为了让 ng serve 与其一起工作，还需要将新配置添加到“serve”下的配置部分中：

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

- wctiger

---

这是针对 ng build --configuration=qa 的，而不是 serve。 - Daniel Netzer

@DanielNetzer 为了让服务像答案中提到的那样运行，我仍然需要添加这部分内容。 - wctiger

Answer 3

为了正确设置环境，我们需要通过将以下内容添加到配置文件 angular.json 中来通知 Angular。我们将通过扩展配置对象来实现这一点：

... // angular.json
configurations": {
    "production" {...} // leave as it is,
    "dev": {
        "fileReplacements": [
            {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.dev.ts"
            }
        ]
    }
}

接下来，需要更新服务对象：

"serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
        "browserTarget": "<appname>:build"
    },
    "configurations": {
        "production": ... // leave as it is
        "dev": {
            "browserTarget": "<appname>:build:dev"
        }
    }
},

在src/environment/目录下创建一个名为environment.dev.ts的环境文件。

然后运行以下命令：

ng serve -c=dev

你也可以通过在package.json文件中添加以下代码来创建一个单独运行此环境的命令：

"scripts": {
   "start:dev": "ng serve -c=dev --port=4000"
   }
}

我们开始吧

npm run start:dev

- Hidayt Rahman

---

感谢您提供的信息丰富的答案。非常感激！ - Danoram

很高兴能帮助别人并节省他们的时间 :) - Hidayt Rahman

@Hidayt Rahman，和替换json文件的需求一样，您能否提供一些示例？ - sarangan

Answer 4

在 angular.json 中有一个属性可以指定在开发和生产中使用哪个文件，通常情况下，您需要在项目中导入 environment.ts 来获取所需内容。

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

- Joshua Chan