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插件
Nov 24 Javascript
禁止选中文字兼容IE、Chrome、FF等
Sep 04 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
javascript中使用正则计算中文长度的例子
Apr 29 Javascript
Node.js的特点和应用场景介绍
Nov 04 Javascript
js中的事件捕捉模型与冒泡模型实例分析
Jan 10 Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
让Vue响应Map或Set的变化操作
Nov 11 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
用php写的serv-u的web申请账号的程序
2006/10/09 PHP
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
php中获得视频时间总长度的另一种方法
2011/09/15 PHP
PHP加密函数 Javascript/Js 解密函数
2013/09/23 PHP
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
php顺序查找和二分查找示例
2014/03/27 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
vue2 中如何实现动态表单增删改查实例
2017/06/09 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
利用PHP实现递归删除链表元素的方法示例
2020/10/23 Javascript
Python重新引入被覆盖的自带function
2014/07/16 Python
Python中的异常处理学习笔记
2015/01/28 Python
python实现JAVA源代码从ANSI到UTF-8的批量转换方法
2015/08/10 Python
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
python向企业微信发送文字和图片消息的示例
2020/09/28 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
Gap工厂店:Gap Factory
2017/11/02 全球购物
粉红色的鲸鱼:Vineyard Vines
2018/02/17 全球购物
旅游管理实习自我鉴定
2013/09/29 职场文书
电子商务专员岗位职责
2013/12/11 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
面试复试通知单
2015/04/24 职场文书
MySQL导致索引失效的几种情况
2022/06/25 MySQL