乐趣区

angular6根据environments配置文件更改开发所需要的环境

前端开发过程中,我们常常需要根据需求去运行或者打包不同环境的代码,幸运的是,angular 给我们提供了 environments 配置,但是 angular6.x 的配置方式和 angular 的其他版本的配置方式是有所不同的,下面我就分别介绍在测试 test、预生产 pre 环境下实现 environments 配置。
一、angular6.x 下 environments 的配置
首先,在 environments 文件夹下创建 environment.test.ts 和 environment.pre.ts 文件,如下图

然后分别在里面添加如下内容

然后找到 angular.json 文件,在 architect 对象下的 configurations 下添加如下代码:

然后在找到 serve,添加如下的代码

可以通过运行 ng serve –configuration=test 或者 ng serve -c test 课件在控制台打印:
{production: false, path: “https://test.webapi.sxmaps.com/”}
path: “https://test.webapi.sxmaps.com/”
production: false
__proto__: Object
同理运行 ng serve –configuration=pre 或者 ng serve -c pre 可获取到预生产环境的域名,所以,你只需要在需要用到环境变量的地方引入即可,如
import {environment} from ‘../environments/environment’;

二、angular 其他版本 environments 的配置
同样的,首先在 environments 创建 environment.test.ts 和 environment.pre.ts,然后按照上文的步骤,在里面添加相同的内容,然后去到 angular-cli.json 文件找到 environments,在里面添加如何内容:
然后通过运行 ng s –env=test 就可以运行测试环境了,在需要的地方引入 environment 即可。

退出移动版