本篇文章主要介紹了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 '@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,就實現了熱替換功能。
以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!
相關推薦:
以上是Angular HMR(熱模組替換)功能的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!