简介
如果您正在构建使用API的应用程序，您将希望在开发过程中使用API密钥来测试环境，并在生产过程中使用API密钥来测试实际环境。在ANGLE中，您可以使用Environmental ment.ts文件创建环境变量。
<$>[备注] 注意： 这篇文章适用于Angel 2+应用程序。 <$>
在本教程中，您将学习如何在角度中使用环境变量。
前提条件
如果您想继续阅读本文，您将需要：
- Node.js的本地开发环境。遵循如何安装Node.js并创建本地开发Environment.
本教程已使用Node v16.2.0、npm v7.15.1和@angular/core v12.0.3进行了验证。
环境检测
Angel CLI项目已经在生产环境中使用了Production环境变量来启用生产模式：
1[label src/main.ts]
2// ...
3
4if (environment.production) {
5 enableProdMode();
6}
Angel还为我们提供了一个名为isDevMode的实用函数，可以检查应用程序是否在dev模式下运行：
1[label src/app/app.component.ts]
2import { Component, OnInit, isDevMode } from '@angular/core';
3
4@Component({ ... })
5export class AppComponent implements OnInit {
6 ngOnInit() {
7 if (isDevMode()) {
8 console.log('Development!');
9 } else {
10 console.log('Production!');
11 }
12 }
13}
此示例代码将注销消息Development！在开发模式中，并注销消息生产！在生产模式。
添加开发生产变量
您还会注意到，默认情况下，在/src/Environment文件夹中有一个用于开发的环境文件和一个用于生产的环境文件。
假设我们希望使用不同的密钥，具体取决于我们处于开发模式还是生产模式：
对于environment.ts中的开发设置：
1[label src/environment/environment.ts]
2export const environment = {
3 production: false,
4 apiKey: 'devKey'
5};
对于Environmental ment.prod.ts中的生产设置：
1[label src/environment/environment.prod.ts]
2export const environment = {
3 production: true,
4 apiKey: 'prodKey'
5};
在我们的组件中，访问该变量所需的操作如下所示：
1[label src/app/app.component.ts]
2import { Component } from '@angular/core';
3import { environment } from '../environments/environment';
ANGLE负责用正确的环境文件交换环境文件。
使用以下选项运行开发模式：
1ng serve
apiKey变量解析为devKey。
使用以下选项运行生产模式：
1ng serve --configuration=production
<$>[备注]
注意： 之前推荐--prod选项，但--configuration=Production已弃用。
<$>
apiKey变量解析为prodKey。
添加暂存变量
通过在angular.json文件中的configurations字段中添加新条目，在Angular CLI项目中添加新环境。
<$>[备注]
注意： 此前，该配置是在.angular-cli.json中设置的。
<$>
让我们根据生产使用的配置添加一个暂存环境：
1[label angular.json]
2{
3 // ...
4 "projects": {
5 "angular-environment-example": {
6 // ...
7 "prefix": "app",
8 "build": {
9 // ...
10 "configurations": {
11 "staging": {
12 // ...
13 "fileReplacements": [
14 {
15 "replace": "src/environments/environment.ts",
16 "with": "src/environments/environment.stage.ts"
17 }
18 ],
19 // ...
20 },
21 // ...
22 },
23 },
24 "serve": {
25 "builder": "@angular-devkit/build-angular:dev-server",
26 "configurations": {
27 "staging": {
28 "browserTarget": "angular-environment-example:build:staging"
29 },
30 }
31 },
32 }
33 }
34 }
35}
现在，我们可以添加转移环境文件：
1[label src/environments/environment.stage.ts]
2export const environment = {
3 production: true,
4 apiKey: 'stagingKey'
5};
使用以下选项运行开发模式：
1ng serve --configuration=staging
<$>[注]
注意： 以前建议使用--env=staging选项，现在改为--configuration=staging。
<$>
apiKey变量将解析为stagingKey。
结论
在本教程中，您学习了如何在角度中使用环境变量。
如果您想了解更多有关ANGLE的信息，请查看我们的ANGLE主题页面以获取练习和编程项目。