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 相关文章推荐
用js自动判断浏览器分辨率的代码
Jan 28 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
jQuery给多个不同元素添加class样式的方法
Mar 26 Javascript
javascript中的altKey 和 Event属性大全
Nov 06 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
Jan 21 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
webpack打包react项目的实现方法
Jun 21 Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 Javascript
在实例中重学JavaScript事件循环
Dec 03 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
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
javascript下过滤数组重复值的代码
2007/09/10 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
2013/07/03 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
JS验证字符串功能
2017/02/22 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
Vue.js2.0中的变化小结
2017/10/24 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
Python中标准库OS的常用方法总结大全
2017/07/19 Python
分享几道你可能遇到的python面试题
2017/07/24 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
python elasticsearch环境搭建详解
2019/09/02 Python
Pandas的Apply函数具体使用
2020/07/21 Python
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
能源工程专业应届生求职信
2014/03/01 职场文书
英文演讲稿
2014/05/15 职场文书
2014组织生活会方案
2014/05/19 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
裁员通知
2015/04/25 职场文书