详解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 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
(转载)JavaScript中匿名函数,函数直接量和闭包
May 08 Javascript
jQuery 判断元素上是否绑定了事件
Oct 28 Javascript
在html页面上拖放移动标签
Jan 08 Javascript
jQuery on()方法示例及jquery on()方法的优点
Aug 27 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
JS正则替换去空格的方法
Mar 24 Javascript
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
小程序分页实践之编写可复用分页组件
Jul 18 Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 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 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
thinkPHP5框架导出Excel文件简单操作示例
2018/08/03 PHP
Laravel5.5 视图 - 创建视图和数据传递示例
2019/10/21 PHP
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
js+HTML5实现视频截图的方法
2015/06/16 Javascript
继续学习javascript闭包
2015/12/03 Javascript
js实现根据身份证号自动生成出生日期
2015/12/15 Javascript
javascript中闭包(Closure)详解
2016/01/06 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
详解vite+ts快速搭建vue3项目以及介绍相关特性
2021/02/25 Vue.js
django缓存配置的几种方法详解
2018/07/16 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
Python for循环与getitem的关系详解
2020/01/02 Python
Python with标签使用方法解析
2020/01/17 Python
Django重设Admin密码过程解析
2020/02/10 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
yy婚礼司仪主持词
2014/03/14 职场文书
审计班子对照检查材料
2014/08/27 职场文书
小学优秀班主任材料
2014/12/17 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
golang中的空接口使用详解
2021/03/30 Python
解决python存数据库速度太慢的问题
2021/04/23 Python
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL