热模块替换有哪几种实现方法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了热模块替换有哪几种实现方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2660字，纯文字阅读大概需要4分钟。

内容图文

稍微研究了一下，发现在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，就实现了热替换功能。

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

Angular5对组件标签添加样式class步骤说明

nodejs中如何使用websocket（附代码）

怎样获得Number类型数组中最大元素

以上就是热模块替换有哪几种实现方法的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的热模块替换有哪几种实现方法全部内容，希望文章能够帮你解决热模块替换有哪几种实现方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端