AngularHMR(热模块替换)功能的实现方法

    本篇文章主要介绍了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/hmr5、创建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，就实现了热替换功能。