使用environment.ts跨环境构建和服务Angular应用程序（Angular）-js教程-PHP中文网

使用environment.ts跨环境构建和服务Angular应用程序（Angular）

王林

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

原创

660 人浏览过

作为 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”下的“configurations”部分。这定义了不同环境的构建配置。

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

登录后复制