https://github.com/GBeckLi/note-everything/tree/master/angular
問題描述：
angular 開發(fā)編譯速度慢
解決方法：
通過HMR的方式實現(xiàn)angular模塊級別的熱更新不翩，每次只會重新編譯和更新修改文件所在的模塊书闸，從而降低編譯時間挖帘。
angular啟動HMR的步驟：
1. 修改environment文件
修改environments/environment.ts文件如下
export const environment = {
production: false,
hmr: true,
};
修改environments/environment.prod.ts文件如下
export const environment = {
production: true,
hmr: false,
};
2. 安裝第三方模塊
npm install --save-dev @angularclass/hmr
npm install --save-dev @types/node
第一個是用于實現(xiàn)熱更新的第三方插件但骨，第二個是待會需要修改main.ts，其中需要用到module關(guān)鍵字致份，需要安裝@types/node防止啟動報錯变抽；
3. 修改 tsconfig.json 文件
安裝完@types/node之后需要確保tsconfig.json中，需要確保其中compilerOptions.typeRoots的值中包含node_modules/@types,或者compilerOptions.types的值包含node氮块；
"compilerOptions": {
...
"typeRoots": [
...
"node_modules/@types"
...
]
}
或者
"compilerOptions": {
...
"types": [
...
node
...
]
}
4. 創(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();
});
};
5. 修改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';
const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);
if (environment.production) {
enableProdMode();
} else {
if (environment.hmr) {
// tslint:disable-next-line:no-string-literal
if (module['hot']) {
hmrBootstrap(module, bootstrap);
} else {
console.log('Amm..HMR is not enabled for webpack');
}
} else {
bootstrap();
}
}
6. 運行命令： ng serve --hmr
在做的過程中主要遇到2個問題：
一開始按照網(wǎng)上的解決方案是沒有安裝@types/node這個插件的步驟的绍载，后來根據(jù)報錯信息安裝了插件才解決。
運行的時候必須加--hmr參數(shù)滔蝉，這里暫時沒有搞清楚為什么要加击儡，因為根據(jù)代碼的修改來看都是由environments文件決定是否需要啟動hmr。
按照以上步驟修改完成之后蝠引，就可以重新運行ng serve --hmr體驗熱更新了.
