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写的实用看图工具实现代码
Jul 26 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
Jul 04 Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 Javascript
js控制台输出的方法(详解)
Nov 26 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
Sep 04 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
jQuery中使用validate插件校验表单功能
May 24 jQuery
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 Javascript
JavaScript实现五子棋小游戏
Oct 26 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
肝肠寸断了解下!盘点史上最伤心的十大动漫
2020/03/04 日漫
PHP中动态HTML的输出技术
2006/10/09 PHP
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
preg_match_all使用心得分享
2014/01/31 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
JS 统计时间
2021/03/09 Javascript
Aster vs KG BO3 第一场2.18
2021/03/10 DOTA
js交换排序 冒泡排序算法(Javascript版)
2014/10/04 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
Vuex的actions属性的具体使用
2019/04/14 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
python实现括号匹配的思路详解
2018/08/23 Python
python实现zabbix发送短信脚本
2018/09/17 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
python print输出延时,让其立刻输出的方法
2019/01/07 Python
python字符串查找函数的用法详解
2019/07/08 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
Python中格式化字符串的四种实现
2020/05/26 Python
python自动生成sql语句的脚本
2021/02/24 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
delegate与普通函数的区别
2014/01/22 面试题
英语系本科生求职信范文
2013/12/18 职场文书
开展党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
对PyTorch中inplace字段的全面理解
2021/05/22 Python
SpringBoot生成License的实现示例
2021/06/16 Java/Android
Spring中的使用@Async异步调用方法
2021/11/01 Java/Android
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL