首頁 > 文章 > web前端 > Angular HMR(熱模組替換)功能的實作方法

Angular HMR(熱模組替換)功能的實作方法

不言原創: 2018-07-02 14:33:541350瀏覽

本篇文章主要介紹了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 &#39;@angular/core&#39;;
import { createNewHosts } from &#39;@angularclass/hmr&#39;;

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 &#39;@angular/core&#39;;
import { platformBrowserDynamic } from &#39;@angular/platform-browser-dynamic&#39;;

import { AppModule } from &#39;./app/app.module&#39;;
import { environment } from &#39;./environments/environment&#39;;

import { hmrBootstrap } from &#39;./hmr&#39;;

if (environment.production) {
 enableProdMode();
}

const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);

if (environment.hmr) {
 if (module[ &#39;hot&#39; ]) {
  hmrBootstrap(module, bootstrap);
 } else {
  console.error(&#39;Ammm.. HMR is not enabled for webpack&#39;);
 }
} else {
 bootstrap();
}

這裡替換就得啟動文件，如果設定為hmr，那麼呼叫hmrBootStrap來啟動網頁，否則就用過去的

7、現在運行npm run hmr或ng serve --hmr -e=hmr，就實現了熱替換功能。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

Angular HMR(熱模組替換)功能的實作方法

相關文章