1.安装hmr依赖

npm i --save-dev  @angularclass/hmr

2.src/environments/environment.hmr.ts - 添加environment.hmr.ts配置文件

export const environment = {
  production: false,
  hmr: true
}

3.在 environment.prod.ts 和 environment.ts 两个文件中添加 hmr:false

4.src/hmr.ts - 添加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();
  });
};

5.配置angular.json文件

configurations 对象：

增加

"hmr": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.hmr.ts"
    }
  ]
}

serve对象：

增加(hmr-angular - 项目名称)

"builder": "@angular-devkit/build-angular:dev-server",
"options": {
  "browserTarget": "hmr-angular:build"
},
"configurations": {
  "production": {
    "browserTarget": "hmr-angular:build:production"
  },
  "hmr": {
    "browserTarget": "hmr-angular:build:hmr",
    "hmr": true
  }
}

6.package.json - 新增启动命令

"hmr": "ng serve -c=hmr --disable-host-check"

运行 npm run hmr