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


Posted in Javascript onMarch 06, 2019

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

一、angular6.x下environments的配置

首先,在environments文件夹下创建environment.test.ts和environment.pre.ts文件,如下图

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

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

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

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

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

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

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

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

可以通过运行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,在里面添加如何内容:

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

然后通过运行ng s --env=test就可以运行测试环境了,在需要的地方引入environment即可。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javaScript 简单验证代码(用户名,密码,邮箱)
Sep 28 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
js函数的引用, 关于内存的开销
Sep 17 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
js 固定悬浮效果实现思路代码
Aug 02 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
浅谈javascript对象模型和function对象
Dec 26 Javascript
微信小程序网络请求的封装与填坑之路
Apr 01 Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 Javascript
mpvue+vant app搭建微信小程序的方法步骤
Feb 11 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 Javascript
vue项目前端埋点的实现
Mar 06 #Javascript
vue2.0结合Element-ui实战案例
Mar 06 #Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 #Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 #jQuery
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 #Javascript
JS实现数组深拷贝的方法分析
Mar 06 #Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 #Javascript
You might like
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
python实现矩阵打印
2019/03/02 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
Python打开文件、文件读写操作、with方式、文件常用函数实例分析
2020/01/07 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
汉森批发:Hansen Wholesale
2018/05/24 全球购物
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
食品安全处置方案
2014/06/14 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
2014年班级工作总结
2014/11/14 职场文书
优秀班主任先进事迹材料
2014/12/16 职场文书
2015年读书月活动总结
2015/03/26 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
物业保洁员管理制度
2015/08/05 职场文书
详细总结Python常见的安全问题
2021/05/21 Python
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL