详解Angular5/Angular6项目如何添加热更新(HMR)功能


Posted in Javascript onOctober 10, 2018

本文介绍了详解Angular5/Angular6项目如何添加热更新(HMR)功能,分享给大家,具体如下:

A:什么是HMR?

Q:HMR(热替换)用于在运行的应用程序中更新代码而不需要重建它。这将导致更快的更新和更少的全页重新加载。

angular6-hmr

提供angular6以上HMR(热更新)功能

步骤

1、进入angular项目父级目录内

git clone https://github.com/staven630/angular6-hmr

angular6-hmr目录与angular项目(例如:my-app)是同级关系

2、执行gulp hmr --dir angular目录名

如:

npm i
gulp hmr --dir my-app

3、进入angular项目目录,安装@angularclass/hmr

npm install --save-dev @angularclass/hmr --registry https://registry.npm.taobao.org

4、这样angular项目的HMR就配置完成了,执行

npm run hmr

注:保持项目名(package.json中的name)与项目目录名一致

以下为手动配置步骤

Angular6添加HMR

environments目录

environments.ts和environment.prod.ts增加hmr: false

export const environment = {
 hmr: false
};

复制environment新增environment.hmr.ts修改hmr:true

export const environment = {
 hmr: true
};

.angular.json文件

build的configurations中添加

"hmr": {
 "fileReplacements": [
  {
   "replace": "src/environments/environment.ts",
   "with": "src/environments/environment.hmr.ts"
  }
 ]
}

serve的configurations中添加

"hmr": {
 "hmr": true,
 "browserTarget": "my-app:build:hmr"
}

tsconfig.app.json的compilerOptions的types中添加

"types": ["node"]

package.json的scripts中添加

"hmr": "ng serve --configuration hmr --open"

安装依赖

npm install --save-dev @angularclass/hmr

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(mod => ngModule = mod);
 module.hot.dispose(() => {
  const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
  const elements = appRef.components.map(c => c.location.nativeElement);
  const makeVisible = createNewHosts(elements);
  ngModule.destroy();
  makeVisible();
 });
};

修改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('HMR is not enabled for webpack-dev-server!');
  console.log('Are you using the --hmr flag for ng serve?');
 }
} else {
 bootstrap().catch(err => console.log(err));
}

Angular5添加HMR

environments目录

environments.ts和environment.prod.ts增加hmr: false

export const environment = {
 hmr: false
};

复制environment新增environment.hmr.ts修改hmr:true

export const environment = {
 hmr: true
};

.angular-cli.json的environments中添加

"hmr": "environments/environment.hmr.ts"

在package.json的scripts中增加

"hmr": "ng serve --hmr -e=hmr --open"

安装依赖

npm install --save-dev @angularclass/hmr

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(mod => ngModule = mod);
 module.hot.dispose(() => {
  const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
  const elements = appRef.components.map(c => c.location.nativeElement);
  const makeVisible = createNewHosts(elements);
  ngModule.destroy();
  makeVisible();
 });
};

修改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('HMR is not enabled for webpack-dev-server!');
  console.log('Are you using the --hmr flag for ng serve?');
 }
} else {
 bootstrap().catch(err => console.log(err));
}

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

Javascript 相关文章推荐
javascript编程起步(第四课)
Jan 10 Javascript
JavaScript 动态将数字金额转化为中文大写金额
May 14 Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
Mar 21 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
js电话号码验证方法
Sep 28 Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 Javascript
jquery实现全选、不选、反选的两种方法
Sep 06 Javascript
Javascript同时声明一连串(多个)变量的方法
Jan 23 Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 Javascript
微信小程序实现的picker多级联动功能示例
May 23 Javascript
微信小程序canvas动态时钟
Oct 22 Javascript
Node.js npm命令运行node.js脚本的方法
Oct 10 #Javascript
vue环形进度条组件实例应用
Oct 10 #Javascript
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 #Javascript
详解Node.js读写中文内容文件操作
Oct 10 #Javascript
angular6的响应式表单的实现
Oct 10 #Javascript
JS原生带缩略图的图片切换效果
Oct 10 #Javascript
js实现前面自动补全位数的方法
Oct 10 #Javascript
You might like
php 变量未定义等错误的解决方法
2011/01/12 PHP
ThinkPHP模型详解
2015/07/27 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
$.format,jquery.format 使用说明
2011/07/13 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
vue实现抖音时间转盘
2019/09/08 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
django 将model转换为字典的方法示例
2018/10/16 Python
详解Python with/as使用说明
2018/12/13 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
Pandas 解决dataframe的一列进行向下顺移问题
2019/12/27 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
土木工程应届生自荐信
2013/09/24 职场文书
经典安踏广告词
2014/03/21 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书