使用 Typescript 在 Angular 中處理環境的最佳方法

Question

我目前正在制定一種策略，以在 Angular CLI 中盡可能輕松地處理多個環境。

為此，我遵循以下方法：

我的目標是只擁有一次不同 REST 端點的基本 URL，並且所有環境都應該擁有它們（擴展或其他）。

實現這一點的最佳方法是什么？

Answer 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';

Answer 2

如果您使用 webpack，您可以創建一個 environment.ts 文件，其中所有環境特定數據作為對象中的屬性....

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

為每個具有相同對象和屬性的環境（prod、qa 等）創建一個單獨的文件。 當您需要環境信息時，請導入普通的 environment.ts 文件....

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

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

您基本上是在告訴 webpack，無論我在何處導入環境，將它替換為 environment.qa（或任何版本）