最近一個同事在使用Angular的時候,希望能像VUE那樣,修改代碼后瀏覽器不刷新脾歧,頁面對應修改的組件自動更新的功能讨便。這個功能的名字時HMR (hot module replace)充甚。
稍微研究了一下,發(fā)現(xiàn)在angular/cli創(chuàng)建的項目中霸褒,實現(xiàn)這個不算太難伴找,步驟如下:
- 首先創(chuàng)建一個
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
也有同樣效果技矮。不過我對熱替換功能還不是那么相信,重新刷新瀏覽器能保證狀態(tài)更加干凈一些殊轴,所以讓environment.ts
中的hmr
為false
.
- 在
.angular-cli.json
文件的環(huán)境中增加hmr
的環(huán)境衰倦,大致如下:
"environments": {
...
"hmr": "environments/environment.hmr.ts",
}
- 在
package.json
的scripts
中增加一個新的命令。(當然也可以不增加旁理,直接運行ng serve --hmr -e=hmr
和運行npm run hmr
效果一樣)
"scripts": {
...
"hmr": "ng serve --hmr -e=hmr"
}
安裝
hmr
模塊樊零,命令如下:
npm install --save-dev @angularclass/hmr
創(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ā)生在瀏覽器里面劲适。所以頁面不會刷新楷掉。
- 更新
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
來啟動網頁烹植,否則就用過去的
- 現(xiàn)在運行
npm run hmr
或者ng serve --hmr -e=hmr
,就實現(xiàn)了熱替換功能愕贡。
參考文獻: https://medium.com/wizardnet972/hot-module-replacement-with-angular-cli-5fc7a3ae4a9c