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动态调整iframe高度的代码
Apr 10 Javascript
js 模拟实现类似c#下的hashtable的简单功能代码
Jan 24 Javascript
用jQuery中的ajax分页实现代码
Sep 20 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
生成二维码方法汇总
Dec 26 Javascript
AngularJs html compiler详解及示例代码
Sep 01 Javascript
分享一个原生的JavaScript拖动方法
Sep 25 Javascript
JS调用Android、Ios原生控件
Jan 06 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
Aug 16 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
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
PDO::quote讲解
2019/01/29 PHP
Prototype Array对象 学习
2009/07/19 Javascript
解析John Resig Simple JavaScript Inheritance代码
2012/12/03 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
2012/12/19 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
2016/11/03 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
JavaScript实现获取select下拉框中第一个值的方法
2018/02/06 Javascript
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
Python实现嵌套列表去重方法示例
2017/12/28 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
精彩的推荐信范文
2013/11/26 职场文书
副厂长岗位职责
2014/02/02 职场文书
学雷锋树新风演讲稿
2014/05/10 职场文书
庆六一宣传标语
2014/10/08 职场文书
2014年管理工作总结
2014/11/22 职场文书
嘉宾邀请函
2015/01/31 职场文书
确保工程质量承诺书
2015/04/29 职场文书
2015年科协工作总结
2015/05/19 职场文书
MySQL学习总结-基础架构概述
2021/04/05 MySQL
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python