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

网友投稿 321 2023-02-09


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: () => Promise>) => {

let ngModule: NgModuleRef;

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();

remohttp://veOldHosts();

});

};

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


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:关于JDK8中的字符串拼接示例详解
下一篇:使用FileReader API创建Vue文件阅读器组件
相关文章

 发表评论

暂时没有评论,来抢沙发吧~