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 相关文章推荐
PJ Blog修改-禁止复制的代码和方法
Oct 25 Javascript
Javascript里使用Dom操作Xml
Jan 22 Javascript
文档对象模型DOM通俗讲解
Nov 01 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 Javascript
jquery得到iframe src属性值的方法
Sep 25 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
微信小程序点击滚动到指定位置的实现
May 22 Javascript
解决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
php基础学习之变量的使用
2011/06/09 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
浅析vue-router实现原理及两种模式
2020/02/11 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
Python实现分段线性插值
2018/12/17 Python
Python3内置模块之json编解码方法小结【推荐】
2020/12/09 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
python装饰器原理与用法深入详解
2019/12/19 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
皇马官方商城:Real Madrid Store
2016/09/02 全球购物
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
英国绿色商店:Natural Collection
2019/05/03 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
会计专业个人求职信范文
2014/01/08 职场文书
招聘单位介绍信
2014/01/14 职场文书
课外活动总结
2015/02/04 职场文书
指导教师推荐意见
2015/06/05 职场文书
推广普通话的宣传语
2015/07/13 职场文书
春节随笔
2015/08/15 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
如何理解及使用Python闭包
2021/06/01 Python