欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-11 15:55:50
本文介绍了详解angular5/angular6项目如何添加热更新(hmr)功能,分享给大家,具体如下: a:什么是hmr? q: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));
}

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