浅谈Angular4实现热加载开发旅程


Posted in Javascript onSeptember 08, 2017

本文介绍了Angular4实现热加载开发,分享给大家,具体如下:

安装插件

npm install @angularclass/hmr -D

配置插件

// main.ts
if (environment.production) {
 enableProdMode();
}else {
 if (module.hot) {
  module.hot.accept();
  module.hot.dispose(() => {
   let _styles = document.head.querySelectorAll('style');
   let styles = Array.prototype.slice.call(_styles);
   styles
    .filter((style: any) => style.innerText.indexOf('_ng') !== -1)
    .map((el: any) => document.head.removeChild(el));
  })
 }
}

platformBrowserDynamic().bootstrapModule(AppModule);

配置Typescript

// typings.d.ts
declare var module: NodeModule;
interface NodeModule {
 hot: any;
}

启用热加载

// package.json
ng serve -H d.io --port 3000 --hmr --proxy-config=./proxy.json

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习YUI.Ext 第二天
Mar 10 Javascript
自动最大化窗口的Javascript代码
May 22 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 Javascript
jQuery插件expander实现图片翻转特效
May 21 Javascript
DIV+CSS+jQ实现省市联动可扩展
Jun 22 Javascript
node app 打包工具pkg的具体使用
Jan 17 Javascript
vue基础之v-bind属性、class和style用法分析
Mar 11 Javascript
jQuery中DOM操作原则实例分析
Aug 01 jQuery
微信小程序左右滚动公告栏效果代码实例
Sep 16 Javascript
js匿名函数使用&传参(实例)
Sep 08 #Javascript
js HTML5 canvas绘制图片的方法
Sep 08 #Javascript
WebStorm ES6 语法支持设置&babel使用及自动编译(详解)
Sep 08 #Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 #Javascript
javascript获取指定区间范围随机数的方法
Sep 08 #Javascript
原生js实现简单的模态框示例
Sep 08 #Javascript
javascript 面向对象实战思想分享
Sep 07 #Javascript
You might like
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
python监控文件并且发送告警邮件
2018/06/21 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
Python制作动态字符图的实例
2019/01/27 Python
python3获取url文件大小示例代码
2019/09/18 Python
Python定义一个函数的方法
2020/06/15 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
2019/12/03 HTML / CSS
C#基础面试题
2016/10/17 面试题
违反课堂纪律检讨书
2014/01/19 职场文书
医学生个人求职信范文
2014/02/07 职场文书
优秀毕业自我鉴定
2014/02/15 职场文书
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
意向书范本
2014/07/29 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python