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 相关文章推荐
使用TextRange获取输入框中光标的位
Oct 14 Javascript
js跟随滚动条滚动浮动代码
Dec 31 Javascript
js 返回时间戳所对应的具体时间
Jul 20 Javascript
jquery attr 设定src中含有&(宏)符号问题的解决方法
Jul 26 Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
jquery选择器需要注意的问题
Nov 26 Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 Javascript
小程序调用微信支付的方法
Sep 26 Javascript
详解JavaScript中Arguments对象用途
Aug 30 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+mysql数据库查询实例
2015/01/21 PHP
PHP工厂模式的日常使用
2019/03/20 PHP
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
js调用后台servlet方法实例
2013/06/09 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
jQuery晃动层特效实现方法
2015/03/09 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
python使用递归解决全排列数字示例
2014/02/11 Python
Django框架下在视图中使用模版的方法
2015/07/16 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
django2.0扩展用户字段示例
2019/02/13 Python
Pytorch数据拼接与拆分操作实现图解
2020/04/30 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
印尼网上商店:Alfacart.com
2019/03/11 全球购物
年度考核评语
2014/01/19 职场文书
志愿者活动总结范文
2014/04/26 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书