先決條件
angular cli 至少 1.0.0-beta.22 以上版本
創(chuàng)建項(xiàng)目
使用Angular CLI創(chuàng)建一個(gè)空項(xiàng)目。
ng new ng-hmr
cd ng-hmr
添加HMR環(huán)境配置文件
HMR需要一定代碼嵌入，而這些模塊我們希望只在開發(fā)過程中使用，所以這里創(chuàng)建一個(gè)環(huán)境配置文件，用于區(qū)分我們什么時(shí)候需要引入hmr模塊，而不會(huì)影響我們生產(chǎn)環(huán)境。
首先，創(chuàng)建src/environments/environment.hmr.ts文件，內(nèi)容為：
export const environment = {
production: false,
hmr: true
};
這里相比較默認(rèn)兩個(gè)環(huán)境，增加了hmr: true變量。那么，另外兩個(gè)，也一并設(shè)置相應(yīng)hmr變量，來確保什么情況下才允許開啟 HMR。
environment.prod.ts生產(chǎn)環(huán)境肯定不會(huì)開啟它：
export const environment = {
production: true,
hmr: false
};
environment.ts默認(rèn)環(huán)境，如果有必要也可以設(shè)置為true，為了后面更好的演示，這里我設(shè)置false：
export const environment = {
production: false,
hmr: false
};
新環(huán)境配置還需要更新angular-cli.json的environments節(jié)點(diǎn)，以確保angular cli 能認(rèn)識(shí)：
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts",
// 新增的節(jié)點(diǎn)
"hmr": "environments/environment.hmr.ts"
}
到此，與配置相關(guān)已經(jīng)完成，你可以嘗試使用ng serve --hmr -e=hmr來啟用HMR。而且和之前相比會(huì)有這樣一段提醒：
NOTICE Hot Module Replacement (HMR) is enabled for the dev server.
The project will still live reload when HMR is enabled,
but to take advantage of HMR additional application code is required
(not included in an Angular CLI project by default).
Seehttps://webpack.github.io/docs/hot-module-replacement.html
for information on working with HMR for Webpack.
添加angular-hmr模塊依賴與配置
正如提醒信息中說的，Angular CLI默認(rèn)并不提供HMR所需要的額外應(yīng)用代碼。但Angular已經(jīng)有了一個(gè)現(xiàn)成HMR模塊即【Angular 2 Hot Module Replacement】，安裝它：
npm install --save-dev @angularclass/hmr
接下來，創(chuàng)建src/hmr.ts文件，配置模塊內(nèi)容：
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(mod => {
ngModule = mod;
});
module.hot.dispose(() => {
let appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
let elements = appRef.components.map(c => c.location.nativeElement);
let makeVisible = createNewHosts(elements);
ngModule.destroy();
makeVisible();
});
};
最后，修改src/main.ts內(nèi)容：
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode, ApplicationRef } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/app.module';
import { hmrBootstrap } from './hmr';
if (environment.production) {
enableProdMode();
}
const bootstrap = () => {
return platformBrowserDynamic().bootstrapModule(AppModule);
}
if (environment.hmr) {
if (module['hot']) {
hmrBootstrap(module, bootstrap);
} else {
// 未加上 --hmr 時(shí)，控制臺(tái)會(huì)有錯(cuò)誤提醒
console.error('HMR沒有啟用，確保 ng server 命令加上 --hmr 標(biāo)記');
}
} else {
bootstrap();
}
運(yùn)行
現(xiàn)在，我們可以使用以下命令來啟動(dòng)HMR：
ng serve --hmr -e=hmr
作者：cipchk
鏈接：http://www.itdecent.cn/p/a6361cf7bb4c
來源：簡書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
