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 写类方式之五
Jul 05 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 Javascript
Javascript 按位与运算符 (&)使用介绍
Feb 04 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
JS中递归函数
Jun 17 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
详解vue-router的Import异步加载模块问题的解决方案
May 13 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
Thinkphp框架开发移动端接口(1)
2016/08/18 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
2016/05/27 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
Angular2使用vscode断点调试ts文件的方法
2017/12/13 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
vue组件与复用详解
2018/04/08 Javascript
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
Python实现截屏的函数
2015/07/26 Python
python搭建微信公众平台
2016/02/09 Python
Python中getattr函数和hasattr函数作用详解
2016/06/14 Python
Python编码类型转换方法详解
2016/07/01 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
PyQt5实现登录页面
2020/05/30 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
详解css3 Transition属性(平滑过渡菜单栏案例)
2017/09/05 HTML / CSS
什么是TCP/IP
2014/07/27 面试题
配件采购员岗位职责
2013/12/03 职场文书
校园演讲稿汇总
2014/05/21 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
行政助理岗位职责范本
2015/04/11 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
法制教育观后感
2015/06/17 职场文书
MySQL池化框架学习接池自定义
2022/07/23 MySQL