这次给大家带来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: () => 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，就实现了热替换功能。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
express默认日志组件morgan的详细介绍
webpack的热模块替换hmr/热更新的具体步奏
以上就是angular的hmr功能怎么实现的详细内容。