如何在 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 主题页面,了解练习和编程项目。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/685610.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Java万花筒】数据流的舵手:大数据处理和调度库对比指南

智慧的导航仪:为您的数据流选择正确的大数据处理和调度库 前言 在如今的信息时代,大数据处理和调度已经成为许多企业和组织中关键的任务。为了有效地处理和管理大规模数据流,选择适合的调度库是至关重要的。本文将介绍几种常用的大数据处理…

【前端工程化面试题】使用 webpack 来优化前端性能/ webpack的功能

这个题目实际上就是来回答 webpack 是干啥的,你对webpack的理解,都是一个问题。 (1)对 webpack 的理解 webpack 为啥提出 webpack 是啥 webpack 的主要功能 前端开发通常是基于模块化的,为了提高开发效率&#xff0…

MATLAB知识点:datasample函数(★★☆☆☆)随机抽样的函数,能对矩阵数据进行随机抽样

讲解视频:可以在bilibili搜索《MATLAB教程新手入门篇——数学建模清风主讲》。​ MATLAB教程新手入门篇(数学建模清风主讲,适合零基础同学观看)_哔哩哔哩_bilibili 节选自第3章:课后习题讲解中拓展的函数 在讲解第三…

数据类型与变量

目录 作业回顾 有关JDK, JRE, JVM三者: 判断题 新课学习 字面常量 数据类型 变量 整型变量 长整型变量 短整型变量 字节型变量 浮点型变量 字符型变量 布尔型变量 类型转换 自动类型转换(隐式) 强制类型转换(显式…

Navicat安装使用连接MySQL

目录 安装登录MySQL登录MySQL用Navicat连接MySQL 安装 选择“我同意”,点击下一步。 选择安装的目标文件夹,点击下一步。 点击下一步。 点击下一步。 点击安装。 软件安装需要一些时间,请耐心等待 点击“完成”。 注册 输入 密钥&#x…

Crypto-RSA3

题目:(BUUCTF在线评测 (buuoj.cn)) 共模攻击 ​ 前提:有两组及以上的RSA加密过程,而且其中两次的m和n都是相同的,那么就可以在不计算出d而直接计算出m的值。 ​ 设模数为n,两个用户的公钥分别为…

全栈笔记_浏览器扩展篇(manifest.json文件介绍)

manifest.json介绍 是web扩展技术必不可少的插件配置文件,放在根目录作用: 指定插件的基本信息 name:名称manifest_version:manifest.json文件的版本号,可以写2或3version:版本description:描述定义插件的行为: browser_action:添加一个操作按钮到浏览器工具栏,点击按…

LeetCode 0103.二叉树的锯齿形层序遍历:层序遍历 + 适时翻转

【LetMeFly】103.二叉树的锯齿形层序遍历:层序遍历 适时翻转 力扣题目链接:https://leetcode.cn/problems/binary-tree-zigzag-level-order-traversal/ 给你二叉树的根节点 root ,返回其节点值的 锯齿形层序遍历 。(即先从左往…

关于C++中的深拷贝

说到深拷贝,是相对于浅拷贝而言的。弄清了浅拷贝,深拷贝也就不言自明了。对C初学者而言,所谓浅拷贝在编写程序过程中往往是无感的。我们一般在写一个类时,多数情况我们只是写了成员变量、成员函数,有时为了赋初值方便&…

Java与JavaScript同源不同性

Java是目前编程领域使用非常广泛的编程语言,相较于JavaScript,Java更被人们熟知。很多Java程序员想学门脚本语言,一看JavaScript和Java这么像,很有亲切感,那干脆就学它了,这也间接的帮助了JavaScript的发展…

HTML | DOM | 网页前端 | 常见HTML标签总结

文章目录 1.前端开发简单分类2.前端开发环境配置3.HTML的简单介绍4.常用的HTML标签介绍 1.前端开发简单分类 前端开发,这里是一个广义的概念,不单指网页开发,它的常见分类 网页开发:前端开发的主要领域,使用HTML、CS…

OpenCV中的边缘检测技术及实现

介绍: 边缘检测是计算机视觉中非常重要的技术之一。它用于有效地识别图像中的边缘和轮廓,对于图像分析和目标检测任务至关重要。OpenCV提供了多种边缘检测技术的实现,本博客将介绍其中的两种常用方法:Canny边缘检测和Sobel边缘检测。 理论介…

【C语言】(25)文件包含include

#include是C语言中的预处理指令之一,用于在当前文件中包含另一个文件的内容。用于模块化和代码重用的基本机制。合理使用#include可以使代码结构更加清晰,易于管理和维护。 #include主要用于包含标准库头文件或自定义头文件。 两种形式的#include #in…

C语言程序设计(第四版)—习题7程序设计题

目录 1.选择法排序。 2.求一批整数中出现最多的数字。 3.判断上三角矩阵。 4.求矩阵各行元素之和。 5.求鞍点。 6.统计大写辅音字母。 7.字符串替换。 8.字符串转换成十进制整数。 1.选择法排序。 输入一个正整数n(1<n≤10)&#xf…

简易绘图软件(水一期)

哈哈&#xff01; 1、编写代码&#xff1a; 代码&#xff1a; main: #include <graphics.h> #include <music.h> #include <heker.h> #pragma comment( linker, "/subsystem:\"windows\" /entry:\"mainCRTStartup\"" )using…

在数组中插入元素

问题&#xff1a;假设有一个数组{1&#xff0c;2&#xff0c;3&#xff0c;4&#xff0c;5}&#xff0c;如果我们要在3之后插入一个数&#xff08;520&#xff09;&#xff0c;这该怎么办呢&#xff1f; 思路&#xff1a;要想在以元素3之后插入一个元素&#xff0c;我们先要做…

25天物理探索旅程 - 第四天:光的奇妙旅程揭秘

第四天&#xff0c;我们的科普探险队将踏上一段非凡的旅程&#xff0c;目标是揭开光——这位宇宙间最具魔法特质的信使的秘密面纱。今天&#xff0c;我们将以一种轻松愉快、幽默风趣的方式探讨光的本质&#xff0c;像看一场生动有趣的魔术表演般&#xff0c;领略光那波粒二象性…

react中如何做到中断diff过程和恢复

workLoop是 实现时间切片 和 可中断渲染的核心&#xff0c;简要说明如下&#xff1a; // 并发任务的入口function workLoopConcurrent() {// Perform work until Scheduler asks us to yield// 有任务 & 是否需要中断while (workInProgress ! null && !shouldYiel…

linux系统zabbix工具监控web页面

web页面监控 内建key介绍浏览器配置浏览器页面查看方式 监控指定的站点的资源下载速度&#xff0c;及页面响应时间&#xff0c;还有响应代码&#xff1b; web Scenario&#xff1a; web场景&#xff08;站点&#xff09;web page &#xff1a;web页面&#xff0c;一个场景有多…

二分算法01

二分算法01 1. H指数II2. 使结果不超过阈值的最小除数3. 完成旅途的最少时间 1. H指数II 给你一个整数数组 citations &#xff0c;其中 citations[i] 表示研究者的第 i 篇论文被引用的次数&#xff0c;citations 已经按照 升序排列 。计算并返回该研究者的 h 指数。 h 指数的…