简介
当您在开发需要调用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应用更加健壮、易于维护。希望您能将本文的技巧应用于自己的项目，切实提升开发效率与代码质量。
