详解如何在Angular中使用环境变量，

详解如何在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环境变量的资料请关注3672js教程其它相关文章！

您可能感兴趣的文章:

• Angular应用里环境变量SERVER_REQUEST_ORIGIN含义解析
• Angular环境搭建及简单体验小结
• angular6根据environments配置文件更改开发所需要的环境的方法
• 发布Angular应用至生产环境的方法
• 详解为生产环境编译Angular2应用的方法