详解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)); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。