如何添加/設置環境 Angular 6 angular.json 文件

Question

如何指定要在 Angular 6+ 中使用的環境？ .angular-cli.json文件似乎已從以前的版本更改為angular.json ，並且其中包含json的結構。

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

Answer 1

打開 angular.json 文件。 我們可以看到默認情況下的配置，它將顯示為您各自環境的生產添加代碼片段。 在environment中為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 2

我嘗試了在我的 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 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

Answer 4

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