Angular5/Angular6項目添加熱更新(HMR)功能的方法

這篇文章主要介紹了Angular5/Angular6項目添加熱更新(HMR)功能的方法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

Angular5/Angular6項目如何添加熱更新(HMR)功能，具體如下：

A：什么是HMR？

Q：HMR（熱替換）用于在運行的應用程序中更新代碼而不需要重建它。這將導致更快的更新和更少的全頁重新加載。

angular6-hmr

提供angular6以上HMR(熱更新)功能

步驟

1、進入angular項目父級目錄內

git clone https://github.com/staven630/angular6-hmr

angular6-hmr目錄與angular項目(例如：my-app)是同級關系

2、執行gulp hmr --dir angular目錄名

如：

npm i
gulp hmr --dir my-app

3、進入angular項目目錄，安裝@angularclass/hmr

npm install --save-dev @angularclass/hmr --registry https://registry.npm.taobao.org

4、這樣angular項目的HMR就配置完成了，執行

npm run hmr

注：保持項目名(package.json中的name)與項目目錄名一致

以下為手動配置步驟

Angular6添加HMR

environments目錄

environments.ts和environment.prod.ts增加hmr: false

export const environment = {
 hmr: false
};

復制environment新增environment.hmr.ts修改hmr:true

export const environment = {
 hmr: true
};

.angular.json文件

build的configurations中添加

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

serve的configurations中添加

"hmr": {
 "hmr": true,
 "browserTarget": "my-app:build:hmr"
}

tsconfig.app.json的compilerOptions的types中添加

"types": ["node"]

package.json的scripts中添加

"hmr": "ng serve --configuration hmr --open"

安裝依賴

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);
 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 = () => platformBrowserDynamic().bootstrapModule(AppModule);

if (environment.hmr) {
 if (module[ 'hot' ]) {
  hmrBootstrap(module, bootstrap);
 } else {
  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.log(err));
}

Angular5添加HMR

environments目錄

environments.ts和environment.prod.ts增加hmr: false

export const environment = {
 hmr: false
};

復制environment新增environment.hmr.ts修改hmr:true

export const environment = {
 hmr: true
};

.angular-cli.json的environments中添加

"hmr": "environments/environment.hmr.ts"

在package.json的scripts中增加

"hmr": "ng serve --hmr -e=hmr --open"

安裝依賴

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);
 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 = () => platformBrowserDynamic().bootstrapModule(AppModule);

if (environment.hmr) {
 if (module[ 'hot' ]) {
  hmrBootstrap(module, bootstrap);
 } else {
  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.log(err));
}

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Angular5/Angular6項目添加熱更新(HMR)功能的方法”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!