讓@angular/cli項目支持Hot Module Replacement（HMR）

來自專欄大漠窮秋的專欄15 人贊了文章

【請直接跳到最後一段，有驚喜~】

什麼是HMR？

噢，你自己看看[這裡的官方文檔](Hot Module Replacement)就好了，不解釋。

@angluar/cli 默認沒有很好地支持HMR，我們需要手動做一些事情。

請跟我一步一步來玩。

第一步：修改環境配置文件

為了後續操作能順利進行，首先需要修改默認生成的兩份環境配置文件：src/environments/environment.ts 和 src/environments/environment.prod.ts

在這兩份配置文件裡面都增加一個配置項hmr:false，變成這樣：

export const environment = { production: true, hmr: false, ... };

第二步：新建一份hmr配置文件

創建一份全新的環境配置文件：src/environments/environment.hmr.ts

environment.hmr.ts 裡面的內容如下：

export const environment = { production: false, hmr: true };

修改.angular-cli.json，加一行配置，變成這樣：

"environmentSource": "environments/environment.ts", "environments": { ... "hmr": "environments/environment.hmr.ts", }

修改package.json，加一行腳本：

"scripts": { ... "hmr": "ng serve --hmr -e=hmr" }

第三步：安裝第三方支持模塊同時寫一些代碼

npm install --save-dev @angularclass/hmr

創建一份文件：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(); }); };

代碼很簡單，相信你能看懂，不解釋了。

寫一行代碼很簡單，解釋一行代碼可能需要一千行注釋，故：一碼勝千言。

修改默認生成的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(); }

第四步：啟動項目

npm run hmr

然後你會看到這樣的警告，無視就好了：

注意點

• HMR的好處是：開發的時候不需要每次都整體刷新瀏覽器，只替換被修改過的模塊
• 不要把HMR在生產環境裡面，因為你不能每次改了代碼都去刷所有客戶的瀏覽器
• HMR啟動的方式不是ng serve，而是npm run hmr，請特別注意一下。

cli v6.x已經內置了HMR支持

特別注意:最新的@angular/cli 6.x 版本已經內置了 HMR 支持，只要執行以下命令即可（上面的所有步驟都不需要了，所以趕緊升級到V6.0吧！）：

ng serve --hmr

OpenWMS這個項目的前端已經升級到V6.0.0，有需要參考一下吧：