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 相关文章推荐
JavaScript中链式调用之研习
Apr 07 Javascript
jQuery自带的一些常用方法总结
Sep 03 Javascript
提交按钮的name='submit'引起的js失效问题及原因
Feb 25 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
Apr 06 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
Mar 08 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
Feb 13 Javascript
用原生JS实现简单的多选框功能
Jun 12 Javascript
Node 自动化部署的方法
Oct 17 Javascript
详解weex默认webpack.config.js改造
Jan 08 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 Javascript
javascript实现视频弹幕效果(两个版本)
Nov 28 Javascript
vue实现倒计时功能
Mar 24 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
PHP脚本数据库功能详解(下)
2006/10/09 PHP
最令PHP初学者们头痛的十四个问题
2007/01/15 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
JS打开新窗口防止被浏览器阻止的方法
2015/01/03 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
基于webpack 实用配置方法总结
2017/09/28 Javascript
JS Testing Properties 判断属性是否在对象里的方法
2017/10/01 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
Async/Await替代Promise的6个理由
2019/06/15 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
python中的__slots__使用示例
2015/02/26 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
python实现逻辑回归的示例
2020/10/09 Python
python利用opencv实现颜色检测
2021/02/23 Python
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
代领学位证书毕业证书委托书
2014/09/30 职场文书
介绍信的写法
2015/01/31 职场文书
综合测评自我评价
2015/03/06 职场文书
抢劫罪辩护词
2015/05/21 职场文书
2016年社区文体活动总结
2016/04/06 职场文书
工作简历的自我评价
2019/05/16 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书
Redis实现订单自动过期功能的示例代码
2021/05/08 Redis