如何添加/设置环境 Angular 6 angular.json 文件

Question

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

我如何/在此文件中指定要使用的环境？

Answer 1

angular.json 中有一个属性可以指定在 dev 和 prod 中使用哪个文件，并且像往常一样，您在项目中导入 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
        }
      }

Answer 2

打开 angular.json 文件。我们可以看到默认情况下的配置，它将为您各自的环境添加代码 sn-p 显示。在 dev 的环境中添加 environment.dev.ts 文件，为 qa 添加 environment.qa.ts。根据您的喜好命名。 使用

 ng serve --configuration=environment_name

environment_name - (dev,qa,prod) 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 3

我尝试了在我的 Angular 6 应用程序中添加新配置“测试”的答案，然后运行 ​​

ng serve --configuration=test

并且收到一条错误消息，提示“在项目中找不到配置‘测试’”。 向下看 angular.json 文件，“build”下还有另一个部分，称为“serve”。新配置需要添加到“serve”下的配置部分，以便 ng 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"
        }
      }
    },

Answer 4

为了正确设置环境，我们需要通过将这些添加到配置文件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