浅谈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 相关文章推荐
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
JS 如果改变span标签的是否隐藏属性
Oct 06 Javascript
JavaScript中的style.display属性操作
Mar 27 Javascript
关于js注册事件的常用方法
Apr 03 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
JS实现来回出现文字的状态栏特效代码
Oct 31 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
js面向对象编程OOP及函数式编程FP区别
Jul 07 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
德生PL660的电路分析和打磨
2021/03/02 无线电
FCKeditor添加自定义按钮
2008/03/27 PHP
ie6 动态缩略图不显示的原因
2009/06/21 PHP
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
jQuery 实现倒计时天,时,分,秒功能
2018/07/31 jQuery
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
python合并文本文件示例
2014/02/07 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
对Django中的权限和分组管理实例讲解
2019/08/16 Python
python生成器推导式用法简单示例
2019/10/08 Python
Python数据可视化:箱线图多种库画法
2019/11/06 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
JSF界面控制层技术
2013/06/17 面试题
英文版网络工程师求职信
2013/10/28 职场文书
职位说明书范文
2014/05/07 职场文书
最美护士演讲稿
2014/08/27 职场文书
毕业生入职感言
2015/07/31 职场文书
超市主管竞聘书
2015/09/15 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python