如何在Angular中使用环境变量

介绍

如果您正在构建使用 API 的应用程序，您需要在开发期间使用 API 密钥来测试环境，并在生产期间使用 API 密钥来测试实时环境。在 Angular 中，您可以使用 environment.ts 文件创建环境变量。

注意： 这篇文章适用于 Angular 2+ 应用程序。

在本教程中，您将学习如何在 Angular 中使用环境变量。

先决条件

如果您想继续阅读本文，您将需要：

Node.js 的本地开发环境。关注【X7X】如何安装Node.js并创建本地开发环境【X76X】。

本教程已使用 Node v16.2.0、npm v7.15.1 和 @angular/core v12.0.3 进行了验证。

检测环境

Angular CLI 项目在生产环境中已经使用 production 环境变量来启用生产模式：

src/main.ts

// ...

if (environment.production) {
  enableProdMode();
}

Angular 还为我们提供了一个名为 isDevMode 的实用程序函数，它可以检查应用程序是否在开发模式下运行：

src/app/app.component.ts

import { Component, OnInit, isDevMode } from '@angular/core';

@Component({ ... })
export class AppComponent implements OnInit {
  ngOnInit() {
    if (isDevMode()) {
      console.log('Development!');
    } else {
      console.log('Production!');
    }
  }
}

此示例代码将在开发模式下注销消息 'Development!，并在生产模式下注销消息 Production!。

添加开发和生产变量

您还会注意到，默认情况下，在 /src/environment 文件夹中，您有一个用于开发的环境文件和一个用于生产的环境文件。

假设我们想要使用不同的密钥，具体取决于我们是处于开发模式还是生产模式：

对于 environment.ts 中的开发设置：

src/环境/环境.ts

export const environment = {
  production: false,
  apiKey: 'devKey'
};

对于 environment.prod.ts 中的生产设置：

src/environment/environment.prod.ts

export const environment = {
  production: true,
  apiKey: 'prodKey'
};

在我们的组件中，为了访问变量，我们需要做的事情如下：

src/app/app.component.ts

import { Component } from '@angular/core';
import { environment } from '../environments/environment';

Angular 负责将环境文件换成正确的文件。

运行开发模式：

ng serve

apiKey 变量解析为 devKey。

运行生产模式：

ng serve --configuration=production

注意： 以前，推荐使用 --prod 选项，但 --configuration=production 已弃用此选项。

apiKey 变量解析为 prodKey。

添加暂存变量

通过向 angular.json 文件中的 configurations 字段添加新条目，在 Angular CLI 项目中添加新环境。

注意： 之前这个配置是在.angular-cli.json中设置的。

让我们根据生产使用的配置添加一个暂存环境：

角.json

{
  // ...
  "projects": {
    "angular-environment-example": {
      // ...
      "prefix": "app",
        "build": {
          // ...
          "configurations": {
            "staging": {
              // ...
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.stage.ts"
                }
              ],
              // ...
            },
            // ...
          },
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "staging": {
              "browserTarget": "angular-environment-example:build:staging"
            },
          }
        },
      }
    }
  }
}

现在我们可以添加一个暂存环境文件：

src/environments/environment.stage.ts

export const environment = {
  production: true,
  apiKey: 'stagingKey'
};

运行开发模式：

ng serve --configuration=staging

注意： 以前推荐使用 --env=staging 选项，但现在已替换为 --configuration=staging。

apiKey 变量将解析为 stagingKey。

结论

在本教程中，您学习了如何在 Angular 中使用环境变量。

如果您想了解有关 Angular 的更多信息，请查看我们的 Angular 主题页面以获取练习和编程项目。