說明

1、HMR的好處是：開發(fā)的時(shí)候不需要每次都整體刷新瀏覽器，只替換被修改過的模塊
2、不要把HMR在生產(chǎn)環(huán)境里面，因?yàn)槟悴荒苊看胃牧舜a都去刷所有客戶的瀏覽器

1、安裝依賴

npm install @angularclass/hmr --save-dev

2、修改配置文件

// 修改src/environments/environment.ts
export const environment = {
  production: false,
  hmr: true
};

// 修改src/environments/environment.prod.ts
export const environment = {
  production: true,
  hmr: false
};

3、添加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();
  });
};

4、修改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 = () => {
  return platformBrowserDynamic().bootstrapModule(AppModule);
};

if (environment.hmr) {
  if (module['hot']) {
    hmrBootstrap(module, bootstrap);
  } else {
    // 未加上 --hmr 時(shí)，控制臺(tái)會(huì)有錯(cuò)誤提醒
    console.error('HMR is not enabled for webpack-dev-server!');
    console.log('Are you using the --hmr flag for ng serve?');
  }
} else {
  bootstrap().catch(err => console.error(err));
}

5、配置tsconfig.app.json文件

這樣基本的配置就都好了，這個(gè)時(shí)候啟動(dòng)項(xiàng)目你會(huì)發(fā)現(xiàn)類似如下的錯(cuò)誤:

這個(gè)時(shí)候需要在 src/tsconfig.app.json 文件中加上

"types": ["node"]

6、啟動(dòng)應(yīng)用

最新的angular版本已經(jīng)內(nèi)置了HMR 支持，所以命令只需要加上 --hmr即可，無需像以前版本中配置configurations之類的

ng serve --hmr

好了，項(xiàng)目已經(jīng)成功啟動(dòng)，這時(shí)候你會(huì)看到如下警告，他只是一個(gè)提示，不要慌

我們只需要在項(xiàng)目根目錄的中的server.options下添加

"hmrWarning": false

angular.json

最后我們?cè)賮碇匦聠?dòng)項(xiàng)目，大功告成！！