angular项目本地热更新缓慢解决方案

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体验热更新了.