如何在 Angular 中使用环境变量

简介: 如何在 Angular 中使用环境变量

本文介绍了如何在Angular项目中使用环境变量,区分开发、生产环境,以及如何添加暂存环境以管理API密钥。通过environment.ts和angular.json配置,确保在不同模式下正确加载相应的密钥值。

简介

如果你正在构建一个使用 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 主题页面,了解练习和编程项目。


目录
相关文章
|
4月前
|
网络协议 Unix Shell
FreeBSD的特点是什么?如何使用?
【10月更文挑战第29天】FreeBSD的特点是什么?如何使用?
150 2
|
10月前
|
Java Serverless 数据库连接
nacosjar包运行问题之报错何解决?
Nacos是一个开源的、易于部署的动态服务发现、配置管理和服务管理平台,旨在帮助微服务架构下的应用进行快速配置更新和服务治理;在实际运用中,用户可能会遇到各种报错,本合集将常见的Nacos报错问题进行归纳和解答,以便使用者能够快速定位和解决这些问题。
321 11
|
5月前
|
缓存 监控 JavaScript
Angular 应用打包和部署
【10月更文挑战第16天】Angular 应用的打包和部署是一个综合性的过程,需要考虑多个方面的因素。通过合理的打包和部署策略,可以确保应用在生产环境中稳定运行,并为用户提供良好的体验。你需要根据实际情况选择合适的部署方式,并不断优化和改进部署流程,以适应业务的发展和变化。
|
10月前
|
Java 应用服务中间件 容器
SpringBoot配置外部Tomcat并打war包
SpringBoot配置外部Tomcat并打war包
183 0
|
5月前
|
Java Linux Windows
windows版java版本管理器
本文介绍了如何在Windows上使用JDK版本管理器jvms来管理多个Java版本,包括下载、初始化、列出本地安装的JDK版本、在线查看可用版本、切换和安装特定版本的Java。
364 0
windows版java版本管理器
|
6月前
|
监控 Java Nacos
SpringCloud基础5——微服务保护、Sentinel
sentinel、雪崩问题、流量控制、隔离和降级、授权规则、规则持久化
SpringCloud基础5——微服务保护、Sentinel
|
10月前
|
SQL 关系型数据库 MySQL
【Mysql】MYSQL参数max_allowed_packet 介绍
【Mysql】MYSQL参数max_allowed_packet 介绍
862 0
|
8月前
|
存储 运维 监控
怎样配置Linux分析工具:kdump篇
在运维的世界里,服务器的稳定运行是生命的灯塔,一旦遭遇异常重启,便是暴风雨来临的预兆。作为一名运维工程师,深知在这场与故障斗争的战役中,武器的锋利至关重要。今天,我要介绍的主角/工具——kdump,正是这样一款能在风雨来临之际,为我们捕获那一闪而过的真相的工具。
怎样配置Linux分析工具:kdump篇
|
8月前
|
JavaScript
js 解析和操作树 —— 获取树的深度、提取并统计树的所有的节点和叶子节点、添加节点、修改节点、删除节点
js 解析和操作树 —— 获取树的深度、提取并统计树的所有的节点和叶子节点、添加节点、修改节点、删除节点
212 0