浅谈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 相关文章推荐
JavaScript去除空格的几种方法
Oct 03 Javascript
分析 JavaScript 中令人困惑的变量赋值
Aug 13 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
canvas实现图像布局填充功能
Feb 06 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
vue发送ajax请求详解
Oct 09 Javascript
通过实例解析js简易模块加载器
Jun 17 Javascript
移动端吸顶fixbar的解决方案详解
Jul 17 Javascript
JavaScript setTimeout()基本用法有哪些
Nov 04 Javascript
关于JavaScript 中 if包含逗号表达式
Nov 27 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 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
给PHP开发者的编程指南 第一部分降低复杂程度
2016/01/18 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
2018/10/15 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
Laravel如何自定义command命令浅析
2019/03/23 PHP
强制设为首页代码
2006/06/19 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
node中Express 动态设置端口的方法
2017/08/04 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
Python模块学习 datetime介绍
2012/08/27 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
详解python中递归函数
2019/04/16 Python
Python中logger日志模块详解
2020/08/04 Python
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
中医药大学市场营销专业自荐信
2013/09/29 职场文书
师范毕业生自我鉴定
2014/01/15 职场文书
幼儿园安全检查制度
2014/01/30 职场文书
初中生自我评价
2014/02/01 职场文书
指导教师评语
2014/04/26 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
2014和解协议书范文
2014/09/15 职场文书
产品委托授权书范本
2014/09/16 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
思想品德评语大全
2014/12/31 职场文书
小学生勤俭节约倡议书
2015/04/29 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
MySQL 查询速度慢的原因
2021/05/25 MySQL
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB