详解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 相关文章推荐
可以支持多中格式的JS键盘
May 02 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 Javascript
JavaScript判断密码强度(自写代码)
Sep 06 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
Jul 23 Javascript
简单实现js鼠标跟随效果
Aug 02 Javascript
微信小程序三级联动选择器使用方法
May 19 Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
小程序自定义弹框效果
Nov 16 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
JavaScript缓动动画函数的封装方法
Nov 25 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 网络开发详解之远程文件包含漏洞
2010/04/25 PHP
Drupal7中常用的数据库操作实例
2014/03/02 PHP
PHP制作图形验证码代码分享
2014/10/23 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
PHP生成器简单实例
2015/05/13 PHP
PHP中使用curl入门教程
2015/07/02 PHP
twig模板常用语句实例小结
2016/02/04 PHP
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
用js判断页面是否加载完成实现代码
2012/12/11 Javascript
javascript的数组和常用函数详解
2014/05/09 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
原生JS检测CSS3动画是否结束的方法详解
2019/01/27 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
Python批量删除只保留最近几天table的代码实例
2019/04/01 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
通过Python实现Payload分离免杀过程详解
2020/07/13 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
Python 如何调试程序崩溃错误
2020/08/03 Python
四风存在的原因分析
2014/02/11 职场文书
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
积极贯彻学习两会精神总结
2014/03/17 职场文书
教师求职信
2014/06/17 职场文书
2014小学语文教学工作总结
2014/12/17 职场文书
国博复兴之路观后感
2015/06/02 职场文书
使用Python获取字典键对应值的方法
2022/04/26 Python