详解Angular5/Angular6项目如何添加热更新(HMR)功能

本文介绍了详解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 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));
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。