登录  /  注册
首页 > web前端 > js教程 > 正文

怎样进行Angular HMR)功能实现

php中世界最好的语言
发布: 2018-05-26 16:38:29
原创
845人浏览过

这次给大家带来怎样进行Angular HMR)功能实现,进行Angular HMR)功能实现的注意事项有哪些,下面就是实战案例,一起来看一下。

最近一个同事在使用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: () =&gt; Promise<ngmoduleref>&gt;) =&gt; {
 let ngModule: NgModuleRef<any>;
 module.hot.accept();
 bootstrap().then(currentModule =&gt; ngModule = currentModule);
 module.hot.dispose(() =&gt; {
  const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
  const elements = appRef.components.map(c =&gt; c.location.nativeElement);
  const removeOldHosts = createNewHosts(elements);
  ngModule.destroy();
  removeOldHosts();
 });
};</any></ngmoduleref>
登录后复制

这事热替换的关键,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 = () =&gt; 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,就实现了热替换功能。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

整理常用的JS排序算法

怎样使用React Native做出悬浮按钮组件

以上就是怎样进行Angular HMR)功能实现的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号