https://github.com/GBeckLi/note-everything/tree/master/angular
问题描述：
angular 开发编译速度慢
解决方法：
通过HMR的方式实现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
第一个是用于实现热更新的第三方插件，第二个是待会需要修改main.ts，其中需要用到module关键字，需要安装@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. 创建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个问题：
一开始按照网上的解决方案是没有安装@types/node这个插件的步骤的，后来根据报错信息安装了插件才解决。
运行的时候必须加--hmr参数，这里暂时没有搞清楚为什么要加，因为根据代码的修改来看都是由environments文件决定是否需要启动hmr。
按照以上步骤修改完成之后，就可以重新运行ng serve --hmr体验热更新了.
