AngularHMR（热模块替换）功能实现⽅法
最近⼀个同事在使⽤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 = (ApplicationRef);
const elements = appRefponents.map(c => c.location.nativeElement);
const removeOldHosts = createNewHosts(elements);
ngModule.destroy();
removeOldHosts();
});
};
这事热替换的关键，hmrBootstrap会替换原始的bootstrap(下⾯会看到), 替换后，当有新的模块更新时，hmr会⾸先移除掉旧有的模块，然后接收新的模块。这些都是发⽣在浏览器⾥⾯。所以页⾯不会刷新。
6、更新src\main.ts⽂件如下：
import { enableProdMode } from '@angular/core';
angular和angularjs
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './dule';
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 {
<('Ammm.. HMR is not enabled for webpack');
}
} else {
bootstrap();
}
这⾥替换就得启动⽂件，如果设置为hmr，那么调⽤hmrBootStrap来启动⽹页，否则就⽤过去的7、现在运⾏npm run hmr或者ng serve --hmr -e=hmr，就实现了热替换功能。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。