详解如何在Angular中使用环境变量
简介
如果你正在构建一个使用 API 的应用程序，你会想在开发过程中使用测试环境的 API 密钥，而在生产环境中使用生产环境的 API 密钥。在 Angular 中，你可以通过 environment.ts 文件创建环境变量。
在本教程中，你将学习如何在 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/environment 文件夹中有一个用于开发环境和一个用于生产环境的环境文件。
假设我们想要根据是否处于开发或生产模式来使用不同的密钥：
对于 environment.ts 中的开发设置：
export const environment = {
production: false,
apiKey: 'devKey'
};
对于 environment.prod.ts 中的生产设置：
export const environment = {
production: true,
apiKey: 'prodKey'
};
在我们的组件中，我们只需要这样做就可以访问变量：
import { Component } from '@angular/core';
import { environment } from '../environments/environment';
Angular 会负责切换正确的环境文件。
使用以下命令运行开发模式：
ng serve
apiKey 变量将解析为 devKey。
使用以下命令运行生产模式：
ng serve --configuration=production
apiKey 变量将解析为 prodKey。
添加暂存变量
通过在 angular.json 文件的 configurations 字段中添加新条目，可以在 Angular CLI 项目中添加新的环境。
让我们基于生产使用的配置添加一个暂存环境：
{
// ...
"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"
},
}
},
}
}
}
}
现在我们可以添加一个暂存环境文件：
export const environment = {
production: true,
apiKey: 'stagingKey'
};
使用以下命令运行开发模式：
ng serve --configuration=staging
apiKey 变量将解析为 stagingKey。
结论
在本教程中，你学习了如何在 Angular 中使用环境变量。
如果你想了解更多关于 Angular 的知识，请查看我们的 Angular 主题页面，了解练习和编程项目。
以上就是详解如何在Angular中使用环境变量的详细内容，更多关于Angular环境变量的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了AngularJS封装指令方法,结合实例形式详细分析了AngularJS的功能、jQuery类库协作及组件封装的具体操作技巧,需要的朋友可以参考下2016-12-12
本篇文章主要介绍了基于AngularJS的拖拽上传的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
Promise是一个构造函数，自己身上有all、reject、resolve这几个异步方式处理值的方法，原型上有then、catch等同样很眼熟的方法，下面通过实例代码给大家讲解angularjs promise 的相关知识，感兴趣的朋友一起看看吧2018-03-03
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
这篇文章主要介绍了AngularJS实现的获取焦点及失去焦点时的表单验证功能,涉及AngularJS使用ng-blur、ng-focus针对表单事件监听相关操作技巧,需要的朋友可以参考下2017-10-10
这篇文章主要介绍了基于AngularJS实现的工资计算器,结合具体实例形式分析了AngularJS数值计算相关操作技巧,需要的朋友可以参考下2017-06-06
这篇文章主要介绍了AngularJS模块管理问题的非常规处理方法，算是一个无奈之举，分享给小伙伴，大家可以参考下。2015-04-04
这篇文章主要介绍了AngularJS服务service用法,结合实例形式总结分析了服务Service的概念、功能及自定义服务的相关操作技巧,需要的朋友可以参考下2016-12-12
本篇文章主要介绍了angularjs的select使用及默认选中设置，非常具有实用价值，需要的朋友可以参考下2017-04-04
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
这篇文章主要给大家介绍了Angularjs中ng-repeat-start与ng-repeat-end的用法，文章开始先进行了简单的介绍，而后通过完整的实例代码详细给大家介绍这两者的用法，有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-12-12
这篇文章主要介绍了Angular4学习笔记之根模块与Ng模块，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
最新评论