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学习笔记(十) js对象 继承
Jun 19 Javascript
JavaScript全排列的六种算法 具体实现
Jun 29 Javascript
浅析JS中document对象的一些重要属性
Mar 06 Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 Javascript
jQuery的bind()方法使用详解
Jul 15 Javascript
原生JS+Canvas实现五子棋游戏实例
Jun 19 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 Javascript
解析vue data不可以使用箭头函数问题
Jul 03 Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 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类的使用 实例代码讲解
2009/12/28 PHP
Memcache 在PHP中的使用技巧
2010/02/08 PHP
php垃圾代码优化操作代码
2010/08/05 PHP
PHP学习笔记之二 php入门知识
2011/01/12 PHP
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
Mysql中分页查询的两个解决方法比较
2013/05/02 PHP
php Hex RGB颜色值互换的使用
2013/05/10 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
JS启动应用程序的一个简单例子
2008/05/11 Javascript
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
2020/04/10 Javascript
node脚手架搭建服务器实现token验证的方法
2021/01/20 Javascript
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
python实现中文输出的两种方法
2015/05/09 Python
Python实现针对中文排序的方法
2017/05/09 Python
Python日期的加减等操作的示例
2017/08/15 Python
Python实现两款计算器功能示例
2017/12/19 Python
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
2018/03/22 Python
Python 字符串与数字输出方法
2018/07/16 Python
python 定时器,实现每天凌晨3点执行的方法
2019/02/20 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
python实现马丁策略的实例详解
2021/01/15 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
社区八一活动方案
2014/02/03 职场文书
小学老师寄语大全
2014/04/04 职场文书
美丽心灵观后感
2015/06/01 职场文书