使用environment.ts跨環境建構和服務Angular應用程式（Angular）-js教程-PHP中文網

使用environment.ts跨環境建構和服務Angular應用程式（Angular）

王林

發布： 2024-09-03 21:00:53

原創

653 人瀏覽過

身為 Angular 開發人員，將應用程式部署到不同的環境 - 開發 (dev)、使用者驗收測試 (UAT) 和生產 - 是很常見的情況。然而，不斷更改程式碼來適應這些環境細節可能會很乏味、容易出錯，並且會降低效率。

本文概述了利用強大的environment.ts 功能，在各種環境中建立和提供 Angular 應用程式的逐步方法，無需修改程式碼庫。

設想：

想像一個 Angular 應用程序，其中前端與託管在不同環境中的後端 API 進行交互。讓我們探索如何建立新環境、配置它們以及根據目標環境提供/建立您的應用程式。

設定環境：

產生環境檔案：

在終端機中執行以下命令：

ng 生成環境

這會在 src 目錄中建立一個名為environments的資料夾，其中包含初始environment.ts檔案。預設情況下，此文件用作您的開發環境配置。

Building and Serving Angular Applications Across Environments with environment.ts (Angular )

定義環境變數：

開啟environment.ts並定義您的開發環境變數：

export const environment = {
  production: false, //Set to False for development
  apiUrl: 'http://my-dev-url' //Replace with your development URL
};

登入後複製

建立特定於環境的檔案：

對於 UAT 和生產環境，建立單獨的檔案：

environment.test.ts（用於 UAT）
environment.prod.ts（用於生產）

將您各自的 UAT 和生產 API URL 加入這些文件：

// environment.test.ts (UAT)
export const environment = {
  production: false,
  apiUrl: 'http://my-uat-url'
};

// environment.prod.ts (Production)
export const environment = {
  production: true,
  apiUrl: 'http://my-prod-url'
};

登入後複製

在程式碼中使用環境：

要在程式碼中使用 API URL：

導入環境.ts:

從'./environments/environment'導入{環境};

存取API URL：

在您的服務或元件中，注入環境變數：

export class MyService {
  constructor() {}
  apiUrl = environment.apiUrl;
}

登入後複製

為特定於環境的構建配置 angular.json：

目標設定：

開啟 angular.json 並找到「build」下的「configuration」部分。這定義了不同環境的建置配置。

"configurations": {
  "production": {
    // Rest of the configs
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  },

"staging": {
    // Rest of the configs
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.test.ts"
      }
    ]
  },
  // ... other configurations
},

"defaultConfiguration": "production"

登入後複製

這指示 Angular CLI 在生產建置期間將預設的environment.ts替換為environment.prod.ts，並在UAT建置期間將預設的environment.test.ts替換為environment.test.ts。

為了在多個環境中提供應用程序，您可以在 angular.json 中新增服務配置，如下所示：

"serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": { … },
    "configurations": {
      "development": {
        // Use the `development` configuration of the `build` target.
        "buildTarget": "my-app:build:development"
      },
      "staging": {
        // Use the `development` configuration of the `build` target.
        "buildTarget": "my-app:build:staging"
      },
      "production": {
        // Use the `production` configuration of the `build` target.
        "buildTarget": "my-app:build:production"
      }
    },
    "defaultConfiguration": "development"
  },

登入後複製