angular 6
HMR
在Angular 6中使用模組熱替換(HMR)
2018/10/03 10:00:00
0
1879
在Angular 6中使用模組熱替換(HMR)
| 簡介 |
本文將介紹在angular 6如何藉由簡單地設定實現模組熱替換 |
| 作者 |
江志卿 |
模組熱替換(Hot Module Replacement)是webpack中一項強大的功能，會在應用程式運行過程中替換，添加或刪除模組，而無需重新加載整個頁面，加快開發速度
。但是在默認情況下不在Angular中啟用，故您必須藉由一些設定來啟用
。為了啟用HMR，我們將對程式碼進行一些修改並添加新的dev依賴項。
第一步 ：安裝@angularclass/hmr
npm install --save-dev @ angularclass / hmr
第二步 ： 建立HMR的環境設定檔environment.hmr.ts
在工作區根目錄下的src/environment目錄下創建一個名為
environment.hmr.ts
的新環境文件。添加以下程式碼：
export const environment = {
production：false，
hmr：true
};
請注意，我們為我們的環境添加了額外的HMR屬性並將其設置為true。
第三步：修改angular.json
之後，我們需要修改angular的組態配置並為build和serve屬性添加hmr環境。在angular工作區的根目錄打開
angular.json
。在構建屬性下，為HMR添加新配置，其內容如下：
“build”：{
“configurations”：{
...
“hmr”：{
“fileReplacements”：[
{
“replace”：“src / environments / environment.ts”，
“with”：“src / environments / environment.hmr .ts“
}
]
}
}
}，
然後在serve屬性下，添加另一個HMR配置，其中包含以下內容：
“serve”：{
“configurations”：{
...
“hmr”：{
“hmr”：true，
“browserTarget”：“：build：hmr”
}
}
}
第四步 ： 修改tsconfig.app.json
接下來，修改您的tsconfig.app配置(
src/tsconfig.app.json)
，將node添加到typings陣列中。
{
...
“compilerOptions”：{
...
“types”：[“node”]
}，
}
第五步 ：更新現有環境
我們需要修改現有的環境文件，並將HMR屬性設置為false。並且，在我們的
environment.ts
和
environment.prod.ts中，
添加hmr屬性並將其設置為false。
// environment.prod.ts
export const environment = {
production：true，
hmr：false
}; // environment.ts
export const environment = {
production：false，
hmr：false
};
第六步 ： 建立hmr.ts
我們需要配置我們的angular application，使其使用熱模組替換。我們在根目錄下建立hmr.ts，程式碼如下：
import { NgModuleRef, ApplicationRef } from '@angular/core';
import { createNewHosts } from '@angularclass/hmr';
export const hmrBootstrap = (module: any, bootstrap: () => Promise<NgModuleRef>) => {
let ngModule: NgModuleRef;
module.hot.accept();
bootstrap().then(mod => (ngModule = mod));
module.hot.dispose(() => {
const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
const elements = appRef.components.map(c => c.location.nativeElement);
const makeVisible = createNewHosts(elements);
ngModule.destroy();
makeVisible();
});
};
第七步： 修改main.ts，將hmr.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('HMR is not enabled for webpack-dev-server!');
console.log('Are you using the --hmr flag for ng serve?');
}
} else {
bootstrap().catch(err => console.log(err));
}
大功告成!
您可以使用
ng serve --configuration hmr
來啟用hmr運行應用程式，但我比較偏愛在package.json中編寫腳本：
“scripts”：{
...
“hmr”：“ng serve --configuration hmr”
}
最後，透過簡短的指令運行：
npm run hmr
相關文章
