在 Angular 中使用 Typescript 处理环境的最佳方法

我目前正在制定一个策略，以在 Angular CLI 中尽可能轻松地处理多个环境。

为此我采取这种方法：

我的目标是不同 REST 端点的基础 URL 只出现一次，并且所有环境都应该拥有它们（扩展或类似的方式）。

实现这个的最佳方式是什么？

答案＃1

你可以使用多个环境文件，以下是你可以这样做的方法，并且在构建时必须指定配置（例如：prod、test、uat）

• 你必须将所有配置添加到 angular.json 文件中

  "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,
        "budgets": [
          {
            "type": "initial",
            "maximumWarning": "2mb",
            "maximumError": "5mb"
          }
        ]
      },
      "develop": {
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.develop.ts"
          }
        ]
      },
      "release": {
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.release.ts"
          }
        ]
      },
      "uat": {
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.uat.ts"
          }
        ]
      },
    }
  

为每个文件添加你的 URL，并且当你在本地构建或运行你的应用时，你必须指定配置

ng build --configuration=uat // for uat env

ng serve --configuration=uat 

或

ng build --prod // for production env

以那种方式导入，它会根据所选配置选择正确的一个

import { environment } from 'src/environments/environment';

答案＃2

如果你正在使用 webpack，你可以创建一个 environment.ts 文件，将所有特定环境的数据作为对象的属性...

    {
        environment: 'dev',
        baseurl: 'http://myBaseUrl'
    }

为每个环境（prod、qa 等）创建一个单独的文件，文件中包含相同的对象和属性。需要环境信息时，导入普通的 environment.ts 文件。

然后在每个 webpack 配置中使用 NormalModuleReplacementPlugin...

    new webpack.NormalModuleReplacementPlugin(/\.\/environment\./, './environment.qa.ts')

你基本上是在告诉 webpack，无论我在哪里导入 environment，都将其替换为 environment.qa（或任何其他版本）