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

时间: 2018-04-08阅读: 1315标签: Angular

最近一个同事在使用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,就实现了热替换功能。


原文链接:https://www.jianshu.com/p/281e5aa559b0


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/592

angularJS自定义服务的几种方式

在angularJS中定义服务共有四种常见的方式:factory,service,provider,constant,value.使用形式的不同:

AngularJS 指令实践

指令(Directives)是所有AngularJS应用最重要的部分。尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令。这篇教程会为你讲述如何自定义指令,以及介绍如何在实际项目中使用

什么是angular依赖注入?

依赖注入是Angular的重要特性之一,依赖注入简化了Angular解析模块/组件之间依赖的过程。依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下, 一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中

解决angularJS解决数据显示闪一下的问题?

使用 angular JS 的时候,把 angularJS 放到文件底部,在渲染页面的时候,会出现闪一下的情况。解决办法:1、使用 ng-cloak ;2、将angular.js的引入放到head前,提前加载;3、使用 ng-bind

为什么使用AngularJS?

Angular.js是google开发者设计和开发的一套前端开发框架,帮助你简化前端开发的负担。下面给大家介绍一下你应该使用Angular.js的重要原因:要知道开源界的很多框架都是开发人员由于个人兴趣或者激情而开发出来的

Angular有哪些版本?

目前Angular有7个版本,分别为:AngularJS、Angular2、Angular4、Angular5、Angular6、Angular7、Angular8。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。

Angular deploy 的实现

Angular CLI 在 8.3.0 发布过一个新命令 ng deploy,可以将 Angular 应用部署到远程服务器或云存储上面,例如:Firebase hosting、Azure、GitHub pages 等等,这也是算是 Angular CLI 最后一个将 Angular 应用从开发到部署打通全能选手工具了。

20 个 AngularJS 开发工具

AngularJS是那些渴望以动态方式来设计web app的web开发人员最偏爱的框架之一。如果你是一个希望启动AngularJS项目的开发人员,那么你可能需要帮助来挑选出趁手的工具……

探索 Angular 使用 ViewContainerRef 操作 DOM

每次我读到 Angular 如何操作 DOM 相关文章时,总会发现这些文章提到 ElementRef、TemplateRef、ViewContainerRef 和其他的类。尽管这些类在 Angular 官方文档或相关文章会有涉及,但是很少会去描述整体思路

AngularJS中几种Providers的区别

AngularJS文档对provider的定义:provider是一个带有$get()方法的对象。injector调用$get方法创建一个新的service的实例。provider还有一些其他的方法,可以用来配置provider。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广