如何在 Angular 中使用环境变量

简介

如果您正在构建使用API的应用程序,您将希望在开发过程中使用API密钥来测试环境,并在生产过程中使用API密钥来测试实际环境。在ANGLE中,您可以使用Environmental ment.ts文件创建环境变量。

<$>[备注] 注意: 这篇文章适用于Angel 2+应用程序。 <$>

在本教程中,您将学习如何在角度中使用环境变量。

前提条件

如果您想继续阅读本文,您将需要:

本教程已使用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主题页面以获取练习和编程项目。

Published At
Categories with 技术
Tagged with
comments powered by Disqus