最近一個同事在使用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();}