Angular 实战——配置使用环境变量

只想快速解决问题的,请直接看粗体部分。

为了更清晰,更快速的了解 Angular 环境配置的架构,请看此图:

下面具体内容也会按照图上所示来介绍。

添加环境配置文件

  1. 创建文件,不过这个步骤在使用 Angular cli 构建的项目的时候已经默认配置好了(如果没有,在项目终端执行 ng generate environments ),在 src -> environments 目录,并且目录下会有几个不同的文件,如下:

名字可以随便取,默认是 Angular 的命名规范, 目录+环境.ts ,一般用默认提供的这两到三个文件就够了,当然如果环境多的情况,就复制出来几份,比如图上: environment.alpha.ts

  1. 配置文件内容

默认需要导出一个对象,默认名字为 environment,如果 想要添加变量,直接在 environment 里添加键值对,比如添加一个baseURL ,下图所示:

两点需要注意:

  1. 多个环境配置文件,默认使用 environment.ts 作为默认/基础文件配置,就是说在项目中使用的地方导入的是该文件 ,可能有同学会问:我想以其他文件作为默认配置行吗,我的回答是:行,但是一定要保证在 angular.json 中映射正确,为了避免配置失误,建议还是不要改。
  2. environment 这个名字也可以修改,但是一定要注意其他引用的地方也要同步修改,比如 main.ts 启动项目时,其他的环境配置文件 一定要和默认/基础文件导出的对象命名保持一致

映射环境配置文件

angular.json 是项目的基础,它配置了打包、服务启动、代理......等,环境配置也是其中的一项

  1. 打开 angular.json 文件,找到节点:"architect" -> "build" -> "configurations",然后添加环境替换规则,如图:

2. 找到节点:"serve" -> "configurations" 添加 "alpha" 节点(内容复制其他环境的就行),如图:

3. 为了后面测试配置的环境是否生效,这里配置默认按照 alpha 运行。

使用环境配置文件

配置结束,使用起来就非常简单了,只需要注意一点,导入的环境文件是基础环境(上面 replace 的文件,通常是 environment.ts),如图:

从页面看下内容:

OK,大功告成!

番外篇:合并通用环境变量

angular 中只提到了配置文件替换规则,可实际开发中有很大部分情况下需要的是合并规则,更详细说:很多环境变量是相同的,我们期望是只写一遍,关于合并规则,angular.json 并没有提供(至少本人没有发现),但是我们可以利用 js 特性手动合并一下,借助一个默认配置文件,配置通用的环境变量,然后在其他文件中做解构合并操作,如图示:

最后

告辞,谢,勿送,望三连 🌹

参考

相关推荐
开开心心就好4 小时前
批量提取PDF中的图片,直接导出原图
前端·javascript·支持向量机·智能手机·pdf·html·启发式算法
Setsuna_F_Seiei6 小时前
前端转型 Agent 开发 05 之 Agent Hooks 与 Checkpointer(让 Agent 从全自动转变人为可掌控)
前端·agent·ai编程
百万蹄蹄向前冲8 小时前
风扇转了一晚上MVP专家团翻车事故
前端·人工智能
默_笙8 小时前
🏛 给 AI 配一间办公室:Harness Engineering 六大模块与它的实现
前端·javascript
linux_cfan9 小时前
videojs v10 源代码系列解读:14 · 谓词守卫:在运行时安全地调用能力
前端·javascript·音视频
kyriewen10 小时前
我扒了 10,221 条 JD:腾讯技术岗 75% 在要 AI
前端·人工智能·ai编程
郑州光合科技余经理10 小时前
同城外卖小程序开发:下单成功后,后台导出能不能对上用户端状态
开发语言·前端·git·后端·uni-app·php·ai编程
IT_陈寒11 小时前
Vue的响应式让我熬到凌晨三点,原来漏了这个小细节
前端·人工智能·后端
Blanche150011 小时前
利用 RAG 为答疑机器人扩展知识范围
前端
天若有情67311 小时前
【纯前端小工具】公历生日转农历,批量查询每年农历生日对应的公历日期(GitHub Pages在线直接用)
前端·javascript·github pages·农历转换·lunisolar·网页小工具