Angular HMR(热模块替换)功能实现方法


Posted in Javascript onApril 04, 2018

最近一个同事在使用Angular的时候,希望能像VUE那样,修改代码后浏览器不刷新,页面对应修改的组件自动更新的功能。这个功能的名字时HMR (hot module replace)。

稍微研究了一下,发现在angular/cli创建的项目中,实现这个不算太难,步骤如下:

1、首先创建一个src/environments/environment.hmr.ts文件,内容如下

export const environment = {
 production: false,
 hmr: true
};

当然,对应的environment.prod.ts和environment.ts需要增加一个hmr:false.

如果environment.ts里面的hmr设置为ture,那么ng serve --hmr也有同样效果。不过我对热替换功能还不是那么相信,重新刷新浏览器能保证状态更加干净一些,所以让environment.ts中的hmr为false.

2、在.angular-cli.json文件的环境中增加hmr的环境,大致如下:

"environments": {
 ...
 "hmr": "environments/environment.hmr.ts",
}

3、在package.json的scripts中增加一个新的命令。(当然也可以不增加,直接运行ng serve --hmr -e=hmr和运行npm run hmr效果一样)

"scripts": {
 ...
 "hmr": "ng serve --hmr -e=hmr"
}

4、安装hmr模块,命令如下:

npm install --save-dev @angularclass/hmr

5、创建src\hmr.ts文件,内容如下:

import { NgModuleRef, ApplicationRef } from '@angular/core';
import { createNewHosts } from '@angularclass/hmr';

export const hmrBootstrap = (module: any, bootstrap: () => Promise<NgModuleRef<any>>) => {
 let ngModule: NgModuleRef<any>;
 module.hot.accept();
 bootstrap().then(currentModule => ngModule = currentModule);
 module.hot.dispose(() => {
  const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
  const elements = appRef.components.map(c => c.location.nativeElement);
  const removeOldHosts = createNewHosts(elements);
  ngModule.destroy();
  removeOldHosts();
 });
};

这事热替换的关键,hmrBootstrap会替换原始的bootstrap(下面会看到), 替换后,当有新的模块更新时,hmr会首先移除掉旧有的模块,然后接收新的模块。这些都是发生在浏览器里面。所以页面不会刷新。

6、更新src\main.ts文件如下:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import { hmrBootstrap } from './hmr';

if (environment.production) {
 enableProdMode();
}

const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);

if (environment.hmr) {
 if (module[ 'hot' ]) {
  hmrBootstrap(module, bootstrap);
 } else {
  console.error('Ammm.. HMR is not enabled for webpack');
 }
} else {
 bootstrap();
}

这里替换就得启动文件,如果设置为hmr,那么调用hmrBootStrap来启动网页,否则就用过去的

7、现在运行npm run hmr或者ng serve --hmr -e=hmr,就实现了热替换功能。

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

Javascript 相关文章推荐
jQuery AnythingSlider滑动效果插件
Feb 07 Javascript
javascript 学习笔记(一)DOM基本操作
Apr 08 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
Oct 30 Javascript
js实现鼠标划过给div加透明度的方法
May 25 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 Javascript
浅析从vue源码看观察者模式
Jan 29 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 Javascript
express express-session的使用小结
Dec 12 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
解决vue中使用swiper插件问题及swiper在vue中的用法
Apr 04 #Javascript
vue基于mint-ui实现城市选择三级联动
Jun 30 #Javascript
vue中mint-ui的使用方法
Apr 04 #Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 #Javascript
JS实现DOM删除节点操作示例
Apr 04 #Javascript
JS实现的DOM插入节点操作示例
Apr 04 #Javascript
AngularJS 应用模块化的使用
Apr 04 #Javascript
You might like
4.与数据库的连接
2006/10/09 PHP
mysql 全文搜索 技巧
2007/04/27 PHP
PHP 采集获取指定网址的内容
2010/01/05 PHP
php中文验证码实现方法
2015/06/18 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
prototype Element学习笔记(篇一)
2008/10/26 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
vue双向绑定简要分析
2017/03/23 Javascript
vue子父组件通信的实现代码
2017/07/09 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
手工制作的音乐盒:Music Box Attic
2019/09/05 全球购物
学习党课思想汇报
2013/12/29 职场文书
2014年五四青年节活动策划书
2014/04/22 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
话题作文之关于呼唤
2019/11/29 职场文书
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang
MYSQL如何查看操作日志详解
2022/05/30 MySQL
element tree树形组件回显数据问题解决
2022/08/14 Javascript