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

本文介绍了详解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));
}

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

(0)

相关推荐

  • Angular HMR(热模块替换)功能实现方法

    最近一个同事在使用Angular的时候,希望能像VUE那样,修改代码后浏览器不刷新,页面对应修改的组件自动更新的功能.这个功能的名字时HMR (hot module replace). 稍微研究了一下,发现在angular/cli创建的项目中,实现这个不算太难,步骤如下: 1.首先创建一个src/environments/environment.hmr.ts文件,内容如下 export const environment = { production: false, hmr: true }; 当

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

    本文介绍了详解Angular5/Angular6项目如何添加热更新(HMR)功能,分享给大家,具体如下: A:什么是HMR? Q:HMR(热替换)用于在运行的应用程序中更新代码而不需要重建它.这将导致更快的更新和更少的全页重新加载. angular6-hmr 提供angular6以上HMR(热更新)功能 步骤 1.进入angular项目父级目录内 git clone https://github.com/staven630/angular6-hmr angular6-hmr目录与angular项

  • 详解go基于viper实现配置文件热更新及其源码分析

    go第三方库 github.com/spf13/viper实现了对配置文件的读取并注入到结构中,好用方便. 其中以 viperInstance := viper.New() // viper实例 viperInstance.WatchConfig() viperInstance.OnConfigChange(func(e fsnotify.Event) { log.Print("Config file updated.") viperLoadConf(viperInstance) //

  • 详解在 Angular 项目中添加 clean-blog 模板

    在 Angular 项目中添加 clean-blog 模板 clean-blog 博客模板下载 clean-blog 或者在下面链接下载 startbootstrap-clean-blog-4-dev.zip 解压并拷贝 解压下载的文件,将所有文件拷贝到 assets/clean-blog 目录下 拷贝代码 将 clean-blog 的 index.html 内容拷贝到 app.component.html <!--The whole content below can be removed w

  • 详解在Angular项目中添加插件ng-bootstrap

    npm 安装 ng-bootstrap 模块 npm install @ng-bootstrap/ng-bootstrap --save 在 Angular 项目配置 app.module.ts 添加 import { NgbModule } from "@ng-bootstrap/ng-bootstrap"; imports: [ /** * ngx-bootstrap */ NgbModule.forRoot() ], 添加 bootstrap.min.css 样式 在 asset

  • 详解如何使用Node.js实现热重载页面

    前言 前不久我结合browser-sync+gulp+gulp-nodemon实现了一款生产环境热更新(我之前理解有点偏差,应该定义为热更新,不是热重载)的项目脚手架,那么,今天我们将使用Node.js实现一个热重载页面. 那么,我今天就总结一下吧,以防止大家也跟我一样. 热重载 所谓热重载就是页面每次改动,不需要手动去刷新,可自动刷新. 热更新 浏览器的无刷新更新,允许在运行时替换,添加,删除各种模块,而无需进行完全刷新重新加载整个页面. 目的:加快开发速度,所以只适用于开发环境下使用. 思路

  • 详解DevEco Studio项目构建讲解、编写页面、布局介绍、页面跳转

    首先要知道鸿蒙的APP是怎么构成的?   HarmonyOS的应用软件包以APP Pack(Application Package)形式发布,它是由一个或多个HAP(HarmonyOS Ability Package)以及描述每个HAP属性的pack.info组成.HAP是Ability的部署包,HarmonyOS应用代码围绕Ability组件展开. 一个HAP是由代码.资源.第三方库及应用配置文件组成的模块包,可分为entry和feature两种模块类型,如下图所示. 一.项目目录 首先来看一

  • 详解antd+react项目迁移vite的解决方案

    antd+react+webpack往往是以react技术栈为主的前端项目的标准组合,三者都有成熟的生态和稳定的表现,但随着前端圈的技术不断革新,号称下一代构建平台vite2的发布,webpack似乎不那么香了,为什么这么说呢,因为vite太快了.经过一段时间的尝试,决定在项目中把webpack替换成vite试试,遂写成本文分享给大家. Vite是什么 作为本文的主角,首先简单介绍一下vite这个构建工具,该工具是尤雨溪推出的[下一代前端开发和构建工具],vite其实也不是一个新的工具,早在一年

  • 详解Java的类加载机制及热部署的原理

    一.什么是类加载 类的加载指的是将类的.class文件的二进制数据读入到内存中,将其放在运行数据区的方法去,然后再堆区创建一个java.lang.Class对象,用来封装类在方法区的数据结构.类的加载的最终产品是位于堆区中的Class对象,Class对象封装了类在方法区的数据结构,并且向Java程序员提供了访问方法区的数据结构的接口. 类加载器并不需要等到某个类被"首次主动使用"时再加载它,JVM规范允许类加载器在预料某个类将要被使用时就预先加载它,如果在预先加载的过程中遇到了.cla

  • 详解本地Vue项目请求本地Node.js服务器的配置方法

    目录 1.使用vue-cli脚手架搭建vue项目 2.使用koa搭建node后端 3.Vue项目中添加后端请求 参考资料: 前言:本文只针对自己需要本地模拟接口于是搭建一个本地node服务器供自己测试使用,仅作自己从头到尾搭建项目的记录 1.使用vue-cli脚手架搭建vue项目 1.在桌面运行 cmd,使用命令vue create demo创建一个vue项目demo,插件依赖等使用默认配置2.项目创建成功之后,使用命令 cd demo,进入 demo 文件夹,然后使用命令 npm run se

  • 详解如何在项目中应用SpringSecurity权限控制

    目录 1.Spring Security环境准备 2.实现认证和授权 3.在控制器上实现注解鉴权 4.请求获取当前登录的用户名信息 5.用户退出 要进行认证和授权需要前面课程中提到的权限模型涉及的7张表支撑,因为用户信息.权限信息.菜单信息.角色信息.关联信息等都保存在这7张表中,也就是这些表中的数据是我们进行认证和授权的依据.所以在真正进行认证和授权之前需要对这些数据进行管理,即我们需要开发如下一些功能: 1.权限数据管理(增删改查) 2.菜单数据管理(增删改查) 3.角色数据管理(增删改查.

随机推荐