hot module replacement 熱模組替換

熱模組替換是webpack的一個特性，通過無重新整理實現程式碼更新。angular CLi是深度定製的webpack 所以也可以使用這一特性。 HMR大幅提高了開發體驗，只更新變更內容，調整樣式迅速，避免了大部分的網路請求、瀏覽器重新渲染、app解析編譯顯示，可以說是提高開發效率的一個神器了。 廢話少說 開搞

首先在配置下環境變數 angular 專案的環境變數預設在environments資料夾下 在.angular-cli.json配置檔案中可以看到對應的環境變數名和配置檔案路徑。

export const environment = {
 production: false,
 hmr: true,   // 新增的 生產環境為false
};
複製程式碼

因為不是angularCLI內建的功能 所以需要使用外掛配合

npm install --save-dev @angularclass/hmr
複製程式碼

然後在建立檔案 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(mod => {
    ngModule = mod;
  }).catch(err => console.error(err));
  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();
  });
};
複製程式碼

然後修改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 {
    console.error('HMR沒有啟用，確保 ng server 命令加上 --hmr 標記');
  }
} else {
  bootstrap().catch(err => console.error(err));
}
複製程式碼

然後執行

ng serve  --hmr
複製程式碼

OK 完成 最後在package.json中修改start

    "start": "ng serve  --hmr",
複製程式碼