最近一個同事在使用Angular的時候，希望能像VUE那樣，修改代碼后瀏覽器不刷新，頁面對應修改的組件自動更新的功能。這個功能的名字時HMR (hot module replace)。
按需開發(fā)網(wǎng)站可以根據(jù)自己的需求進行定制，網(wǎng)站設計制作、網(wǎng)站制作構思過程中功能建設理應排到主要部位公司網(wǎng)站設計制作、網(wǎng)站制作的運用實際效果公司網(wǎng)站制作網(wǎng)站建立與制做的實際意義
稍微研究了一下，發(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.ts和environment.ts需要增加一個hmr:false.
如果environment.ts里面的hmr設置為ture,那么ng serve --hmr也有同樣效果。不過我對熱替換功能還不是那么相信，重新刷新瀏覽器能保證狀態(tài)更加干凈一些，所以讓environment.ts中的hmr為false.
2、在.angular-cli.json文件的環(huán)境中增加hmr的環(huán)境，大致如下：
"environments": {
...
"hmr": "environments/environment.hmr.ts",
}
3、在package.json的scripts中增加一個新的命令。（當然也可以不增加，直接運行ng serve --hmr -e=hmr和運行npm run hmr效果一樣)
"scripts": {
...
"hmr": "ng serve --hmr -e=hmr"
}
4、安裝hmr模塊，命令如下：
npm install --save-dev @angularclass/hmr
5、創(chuàng)建src\hmr.ts文件，內容如下：
import { NgModuleRef, ApplicationRef } from '@angular/core';
import { createNewHosts } from '@angularclass/hmr';
export const hmrBootstrap = (module: any, bootstrap: () => Promise>) => {
let ngModule: NgModuleRef;
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ā)生在瀏覽器里面。所以頁面不會刷新。
6、更新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來啟動網(wǎng)頁，否則就用過去的
7、現(xiàn)在運行npm run hmr或者ng serve --hmr -e=hmr，就實現(xiàn)了熱替換功能。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
