Angular HMR(熱模塊替換) 功能實現(xiàn)

最近一個同事在使用Angular的時候,希望能像VUE那樣,修改代碼后瀏覽器不刷新脾歧,頁面對應修改的組件自動更新的功能讨便。這個功能的名字時HMR (hot module replace)充甚。
稍微研究了一下,發(fā)現(xiàn)在angular/cli創(chuàng)建的項目中霸褒,實現(xiàn)這個不算太難伴找,步驟如下:

  1. 首先創(chuàng)建一個src/environments/environment.hmr.ts文件,內容如下
export const environment = {
 production: false,
 hmr: true
};

當然废菱,對應的environment.prod.tsenvironment.ts需要增加一個hmr:false.

如果environment.ts里面的hmr設置為ture,那么ng serve --hmr也有同樣效果技矮。不過我對熱替換功能還不是那么相信,重新刷新瀏覽器能保證狀態(tài)更加干凈一些殊轴,所以讓environment.ts中的hmrfalse.

  1. .angular-cli.json文件的環(huán)境中增加hmr的環(huán)境衰倦,大致如下:
"environments": {
  ...
  "hmr": "environments/environment.hmr.ts",
}
  1. package.jsonscripts中增加一個新的命令。(當然也可以不增加旁理,直接運行ng serve --hmr -e=hmr和運行npm run hmr效果一樣)
"scripts": {
  ...
  "hmr": "ng serve --hmr -e=hmr"
}
  1. 安裝hmr模塊樊零,命令如下:
    npm install --save-dev @angularclass/hmr

  2. 創(chuàng)建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會首先移除掉舊有的模塊叛溢,然后接收新的模塊塑悼。這些都是發(fā)生在瀏覽器里面劲适。所以頁面不會刷新楷掉。

  1. 更新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來啟動網頁烹植,否則就用過去的

  1. 現(xiàn)在運行npm run hmr或者ng serve --hmr -e=hmr,就實現(xiàn)了熱替換功能愕贡。

參考文獻: https://medium.com/wizardnet972/hot-module-replacement-with-angular-cli-5fc7a3ae4a9c

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末草雕,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子固以,更是在濱河造成了極大的恐慌墩虹,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,755評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件憨琳,死亡現(xiàn)場離奇詭異诫钓,居然都是意外死亡,警方通過查閱死者的電腦和手機篙螟,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3 395
  • 文/潘曉璐 我一進店門菌湃,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人遍略,你說我怎么就攤上這事惧所≈枳” “怎么了?”我有些...
    開封第一講書人閱讀 165,138評論 0 355
  • 文/不壞的土叔 我叫張陵下愈,是天一觀的道長纽绍。 經常有香客問我,道長势似,這世上最難降的妖魔是什么顶岸? 我笑而不...
    開封第一講書人閱讀 58,791評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮叫编,結果婚禮上辖佣,老公的妹妹穿的比我還像新娘。我一直安慰自己搓逾,他們只是感情好卷谈,可當我...
    茶點故事閱讀 67,794評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著霞篡,像睡著了一般世蔗。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上朗兵,一...
    開封第一講書人閱讀 51,631評論 1 305
  • 那天污淋,我揣著相機與錄音,去河邊找鬼余掖。 笑死寸爆,一個胖子當著我的面吹牛,可吹牛的內容都是我干的盐欺。 我是一名探鬼主播赁豆,決...
    沈念sama閱讀 40,362評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼冗美!你這毒婦竟也來了魔种?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,264評論 0 276
  • 序言:老撾萬榮一對情侶失蹤粉洼,失蹤者是張志新(化名)和其女友劉穎节预,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體属韧,經...
    沈念sama閱讀 45,724評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡安拟,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了挫剑。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片去扣。...
    茶點故事閱讀 40,040評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出愉棱,到底是詐尸還是另有隱情唆铐,我是刑警寧澤,帶...
    沈念sama閱讀 35,742評論 5 346
  • 正文 年R本政府宣布奔滑,位于F島的核電站艾岂,受9級特大地震影響,放射性物質發(fā)生泄漏朋其。R本人自食惡果不足惜王浴,卻給世界環(huán)境...
    茶點故事閱讀 41,364評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望梅猿。 院中可真熱鬧氓辣,春花似錦、人聲如沸袱蚓。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽喇潘。三九已至体斩,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間颖低,已是汗流浹背絮吵。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留忱屑,地道東北人蹬敲。 一個月前我還...
    沈念sama閱讀 48,247評論 3 371
  • 正文 我出身青樓,卻偏偏與公主長得像想幻,于是被迫代替她去往敵國和親粱栖。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,979評論 2 355

推薦閱讀更多精彩內容