本文介紹了詳解Angular5/Angular6項目如何添加熱更新(HMR)功能，分享給大家，具體如下：
A：什么是HMR？
Q：HMR（熱替換）用于在運行的應用程序中更新代碼而不需要重建它。這將導致更快的更新和更少的全頁重新加載。
提供angular6以上HMR(熱更新)功能
步驟
1、進入angular項目父級目錄內
git clone https://github.com/staven630/angular6-hmr
angular6-hmr目錄與angular項目(例如：my-app)是同級關系
2、執行gulp hmr --dir angular目錄名
如：
npm igulp 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));}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
