在前端开发中，管理环境变量是很重要的一项工作。而在Angular中，使用 environment.ts 文件来管理环境变量也是一种比较常见的方法。但是，如果你要在不同的环境中使用不同的环境变量，那么每次修改 environment.ts 文件就会变得很麻烦。那么我们是否有更好的方法来管理环境变量呢？
这里介绍一个npm包： angular-env
npm包 angular-env 的使用步骤
- 安装
angular-env包
npm install angular-env --save-dev
- 在
angular.json文件中配置环境变量
打开 angular.json 文件，在 projects > {PROJECT_NAME} > architect > build > configurations 中添加如下代码：
-- -------------------- ---- -------
------ -
------------------- --
---------- ----------------------------------
------- -------------------------------------
--
--
------- -
------------------- --
---------- ----------------------------------
------- --------------------------------------
--
-这里创建了两个配置项： dev 和 prod。dev 用于本地开发环境，prod 用于生产环境。
- 创建环境变量文件
在 src/environments 目录下，分别创建 environment.dev.ts、environment.prod.ts 等环境变量文件。这里以 environment.dev.ts 为例：
export const environment = {
production: false,
apiUrl: 'http://localhost:8080/api'
};- 修改主模块文件
在 app.module.ts 中引入并配置 angular-env 模块。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- ------------------------------
------ - --------- - ---- --------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
------------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -这里首先在 app.module.ts 中引入 environment 对象，然后去使用 angular-env 模块导入并进行配置。本例中使用了 forRoot() 方法来提供配置信息， 让 angular-env 在依赖注入模块中进行全局配置。
- 使用环境变量
在应用中使用环境变量：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- --------------
------------
--------- -----------
--------- ------ ------ -------
--
------ ----- ------------ -
------- -------
------------------- ---- -------------
---------- -
----------- - ----------------
-
-通过 EnvService 来获取熟悉值。
示例代码
github：https://github.com/jerryshi1995/angular-env-demo
结束语
angular-env 包提供了一个更好的选择，可以方便地管理应用不同环境中的环境变量。更重要的是，可以缓解在不同环境中修改每个 environment.ts 文件的痛苦。如果你没有使用它，那么你可以尝试一下，相信你会喜欢它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e4d9381d61a3540ac5