Angular6-hmr開發配置
A:什麼是HMR?
Q:HMR(熱替換)用於在運行的應用程序中更新代碼而不需要重建它。這將導致更快的更新和更少的全頁重新加載。
在environments文件夾中新建 src/environments/environment.hmr.ts,內容分別配置爲:
export const environment = {
production: false,
hmr: true
};
將 src/environments/environment.prod.ts 中 設置屬性hmr: false ,
export const environment = {
production: true,
hmr: false
};
將 src/environments/environment.ts 中 設置屬性hmr: false ,
export const environment = {
production: false,
hmr: false
};
將angular.json文件中配置HMR環境,並在構建和服務中添加配置以啓用HMR。
Tip:<project-name>這裏表示在angular.json中添加此配置的項目的名稱。
"build": {
"configurations": {
...
"hmr": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.hmr.ts"
}
]
}
}
},
...
"serve": {
"configurations": {
...
"hmr": {
"hmr": true,
"browserTarget": "<project-name>:build:hmr"
}
}
}
在 src/tsconfig.app.json中添加types必要的類型
{
...
"compilerOptions": {
...
"types": ["node"]
},
}
在終端中執行以下命令,即可將項目以hmr環境運行
ng serve --configuration hmr
或者在package.json文件中添加script對象,用來便捷啓動程序:
"scripts": {
...
"hmr": "ng serve --configuration hmr"
}
添加@ angurlarclass/HMR依賴
爲了使HMR工作,我們需要安裝依賴項並配置我們的應用程序來使用它,
$ npm install --save-dev @angularclass/hmr
創建 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(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();
});
};
將原src/main.ts中的內容替換如下,hmr就可以正常工作啦!!! :
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));
}
$ npm run hmr
當在控制檯中看到以下提醒時,說明hmr已經在工作啦~!
NOTICE Hot Module Replacement (HMR) is enabled for the dev server.
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.