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>) => { let ngModule: NgModuleRef ; 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>) => { let ngModule: NgModuleRef ; 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)功能的方法”这篇文章对大家有帮助,同时也希望大家多多支持创新互联成都网站设计公司,关注创新互联成都网站设计公司行业资讯频道,更多相关知识等着你来学习!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、网站设计器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
名称栏目:Angular5/Angular6项目添加热更新(HMR)功能的方法-创新互联
浏览地址:http://pwwzsj.com/article/dhessc.html