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 相关文章推荐
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
javascrip关于继承的小例子
May 10 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
JS本地刷新返回上一页代码
Jul 25 Javascript
JavaScript中Array对象用法实例总结
Nov 29 Javascript
jQuery操作json常用方法示例
Jan 04 Javascript
jQuery选择器实例应用
Jan 05 Javascript
Bootstrap禁用响应式布局的实现方法
Mar 09 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 Javascript
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
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输出xml必须header的解决方法
2014/10/17 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
Position属性之relative用法
2015/12/14 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
js 颜色选择插件
2017/01/23 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
JS实现的自定义map方法示例
2019/05/17 Javascript
Javascript Web Worker使用过程解析
2020/03/16 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
python、java等哪一门编程语言适合人工智能?
2017/11/13 Python
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
pytorch实现线性拟合方式
2020/01/15 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
django rest framework serializers序列化实例
2020/05/13 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
Omio葡萄牙:全欧洲低价大巴、火车和航班搜索和比价
2019/02/09 全球购物
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
delegate与普通函数的区别
2014/01/22 面试题
在职研究生自我鉴定
2013/10/16 职场文书
个人素质的自我评价分享
2013/12/16 职场文书
优秀毕业生自我鉴定
2014/01/19 职场文书
退休感言
2014/01/28 职场文书
家长对老师的感言
2014/03/11 职场文书
承诺书范文
2014/06/03 职场文书
个人四风对照检查材料
2014/09/26 职场文书
外出培训学习心得体会
2016/01/18 职场文书