如何add/set环境Angular6angular.json文件

Question

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

How/where 是否在此文件中指定要使用的环境？

Answer 1

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

Answer 2

打开 angular.json 文件。我们可以看到默认情况下的配置，它将显示在生产环境中，为您各自的环境添加代码片段。在开发环境中添加 environment.dev.ts 文件，为质量检查添加 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 应用程序中添加新配置 'test' 的答案，然后运行

ng serve --configuration=test

并收到一条错误消息“无法在项目中找到配置 '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

如何add/set环境Angular6angular.json文件

How to add/set environment Angular 6 angular.json file

angular

angular6