这次给大家带来Angular使用HMR代码解析，Angular使用HMR代码解的注意事项有哪些，下面就是实战案例，一起来看一下。
稍微研究了一下，发现在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>) => { 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(); 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来启动网页，否则就用过去的
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
JS使用createElement()动态添加HTML
JS使用createElement()动态添加HTML
以上就是Angular使用HMR代码解析的详细内容，更多请关注【创想鸟】其它相关文章！
