Angular环境变量配置与使用全面详解及最佳实践

简介

当您在开发需要调用API的Angular应用时，测试环境与生产环境使用不同的密钥是常见需求。在开发阶段，您可能希望使用测试环境密钥进行调试；而上线后则需切换为生产环境密钥。借助Angular的environment.ts文件，您可以轻松管理这些环境变量，这是一种高效且简洁的方式。

本文将详细介绍在Angular中全面使用环境变量的完整流程，涵盖从基础检测到自定义添加新环境的各个步骤，帮助您掌握Angular多环境配置的精髓。

先决条件

动手之前，请确认本地环境是否已准备就绪：

• 建议安装支持Node.js的开发环境。您可以参考《如何安装Node.js并创建本地开发环境》一文进行环境搭建。

本教程在Node v16.2.0、npm v7.15.1和@angular/core v12.0.3环境下测试通过，类似版本均可适用。

检测环境

Angular CLI项目默认集成了一个production环境变量，用于在生产模式下启用生产模式。相关代码如下：

// ...

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

此外，Angular还提供了isDevMode()实用函数，可直接判断当前是否处于开发模式。示例如下：

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/environments目录下，您会看到Angular默认生成的两个环境文件：一个用于开发环境（environment.ts），一个用于生产环境（environment.prod.ts）。这是Angular提供配置环境变量的标准入口。

例如，若要针对不同环境使用不同的API密钥，可如下配置：

在environment.ts（开发环境）中：

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

在environment.prod.ts（生产环境）中：

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

随后在组件中导入environment对象即可调用：

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

Angular会根据您运行的命令自动匹配相应环境文件，开发模式与生产模式无需手动切换。

开发模式下运行：

ng serve

此时apiKey的值为devKey。

生产模式下运行：

ng serve --configuration=production

此时apiKey的值会自动变为prodKey。

添加暂存变量

在实际项目开发中，仅有开发和生产环境往往不足，您可能还需要一个暂存环境（staging）。您可以在angular.json文件的configurations字段中新增配置条目，Angular完全支持此类自定义扩展。

以下演示如何基于生产配置添加staging环境：

{
  // ...
  "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"
            },
          }
        },
      }
    }
  }
}

更新配置文件后，需新建对应的环境文件environment.stage.ts：

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

现在执行暂存模式启动命令：

ng serve --configuration=staging

不出意外，apiKey的值会解析为stagingKey。

结论

尽管这套方法看似简单，但在实际项目中极具价值。无论是隔离API密钥、调整日志级别，还是控制功能开关，灵活运用环境变量都能使您的Angular应用更加健壮、易于维护。希望您能将本文的技巧应用于自己的项目，切实提升开发效率与代码质量。