浅谈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 checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
javascript 哈希表(hashtable)的简单实现
Jan 20 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
Nov 25 Javascript
jQuery实现id模糊查询的小例子
Mar 19 Javascript
js打造数组转json函数
Jan 14 Javascript
JavaScript对HTML DOM使用EventListener进行操作
Oct 21 Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 Javascript
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 Javascript
javascript异步编程的六种方式总结
May 17 Javascript
JavaScript实现滑动门效果
Jan 18 Javascript
webpack安装配置与常见使用过程详解(结合vue)
Jun 01 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
Jul 13 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运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
PHP调试及性能分析工具Xdebug详解
2017/02/09 PHP
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
js 三级关联菜单效果实例
2013/08/13 Javascript
PHP开发者必须掌握的6个关键字
2014/04/14 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
node.js实现爬虫教程
2020/08/25 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
详解小程序如何动态绑定点击的执行方法
2019/11/26 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
粗略分析Python中的内存泄漏
2015/04/23 Python
Python机器学习之决策树算法
2017/12/22 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
Python中logging实例讲解
2019/01/17 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
HTML5通用接口详解
2016/06/12 HTML / CSS
警察思想汇报
2014/01/04 职场文书
蛋糕店的商业计划书范文
2014/01/27 职场文书
消防安全员岗位职责
2014/03/10 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
海康机器人重磅发布全新算法开发平台VM4.2
2022/04/21 数码科技