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精华代码集
Jan 24 Javascript
javascript vvorld 在线加密破解方法
Nov 13 Javascript
JavaScript 数组运用实现代码
Apr 13 Javascript
javascript将相对路径转绝对路径示例
Mar 14 Javascript
javascript实现修改微信分享的标题内容等
Dec 11 Javascript
js中常用的Tab切换效果(推荐)
Aug 30 Javascript
值得分享的Bootstrap Table使用教程
Nov 23 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
使用InstantClick.js让页面提前加载200ms
Sep 12 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 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截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
php+js实现异步图片上传实例分享
2014/06/02 PHP
自己写的兼容低于PHP 5.5版本的array_column()函数
2014/10/24 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
JavaScript中合并数组的N种方法
2014/09/16 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
2016/06/29 Javascript
JS对象创建的几种方式整理
2017/02/28 Javascript
JsChart组件使用详解
2018/03/04 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
2020/08/10 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
Python跨文件全局变量的实现方法示例
2017/12/10 Python
使用Python实现windows下的抓包与解析
2018/01/15 Python
pandas创建新Dataframe并添加多行的实例
2018/04/08 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
Python tkinter常用操作代码实例
2020/01/03 Python
python 回溯法模板详解
2020/02/26 Python
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
枚举与#define宏的区别
2014/04/30 面试题
销售辞职报告范文
2014/01/12 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
地球一小时倡议书
2014/04/15 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
个人批评与自我批评总结
2014/10/17 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
十大公认最好看的动漫:《咒术回战》在榜,《钢之炼金术师》第一
2022/03/18 日漫
vue3不同环境下实现配置代理
2022/05/25 Vue.js
spring IOC容器的Bean管理XML自动装配过程
2022/05/30 Java/Android