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 校验账号是否已被注册的代码
Jul 12 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
jQuery 3.0 的变化及使用方法
Feb 01 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
Javascript中的迭代、归并方法详解
Jun 14 Javascript
jQuery Validate插件实现表单验证
Aug 19 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 Javascript
Angular中管道操作符(|)的使用方法
Dec 15 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
BBS(php & mysql)完整版(七)
2006/10/09 PHP
smarty实例教程
2006/11/19 PHP
PHP 批量删除数据的方法分析
2009/10/30 PHP
解析coreseek for sphinx的使用
2013/06/21 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
通过Javascript读取本地Excel文件内容的代码示例
2014/04/08 Javascript
让IE8浏览器支持function.bind()方法
2014/10/16 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
vue结合Echarts实现点击高亮效果的示例
2018/03/17 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
uni-app实现获取验证码倒计时功能
2020/11/01 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
Python定义函数时参数有默认值问题解决
2019/12/19 Python
Django中FilePathField字段的用法
2020/05/21 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
pandas处理csv文件的方法步骤
2020/10/16 Python
css3中仿放大镜效果的几种方式原理解析
2020/12/03 HTML / CSS
navabi英国:设计师大码女装
2019/06/25 全球购物
精伦电子Java笔试题
2013/01/16 面试题
中科前程Java笔试题
2016/11/20 面试题
Shell脚本如何向终端输出信息
2014/04/25 面试题
师范生个人推荐信
2013/11/29 职场文书
3的组成教学反思
2014/04/30 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python