HMR可热重新加载整个内容

HMR可热重新加载整个内容

本文介绍了带有延迟加载路由的Angular CLI HMR可热重新加载整个内容的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

(甚至在Angular 7中也确认了问题).让我们解决这个问题!

(Confirmed an issue even with Angular 7). Let's get this fixed!

我正在使用此处设置的HMR: https://

I'm using HMR as set up here: https://github.com/angular/angular-cli/wiki/stories-configure-hmr from a fresh ng new build.

如果我更改任何组件并使其延迟加载,则角度HMR将热重新加载所有内容,从而使页面同步速度变慢.

If I change any component and make it lazy loaded, angular HMR will hot-reload everything, making the page sync slower.

我知道这一点,因为默认情况下它是对要重新加载的每个模块设置为console.log,并且当我使用惰性路由时,它将记录所有内容.但是,当我将该组件更改为非延迟加载时,它仅记录了一些小组件.

I know this because it's by default set-up to console.log every module that is being reloaded, and when I'm using a lazy route, it logs everything. But when I change that component to non-lazy-loaded, it logs only a few small components.

因此,当我使用HMR和惰性路由时,我的应用需要花几秒钟的时间来刷新.真烦人

Therefore, when I'm using HMR and lazy routes, my app takes a few more seconds to refresh. This is annoying.

有什么办法解决这个问题吗?

Is there any way around this?

(延迟加载路径是通过这样的方式完成的)

(Lazy loading routes is accomplished by something like this)

// Main homepage
{
  path: '',
  loadChildren: './public/home/home.module#HomeModule'
},
// ...

(这只是一个示例,显示我正在以正确的方式延迟加载)

(just an example to show I am lazy-loading the right way)

以下是一些日志记录,以显示我延迟加载home.component.ts

Here's some logging to show what happens when I lazy load the home.component.ts

// Everything here is normal, great!
[HMR]  - ../../../../../src/app/public/home/home.component.html
log.js:23 [HMR]  - ../../../../../src/app/public/home/home.component.ts
log.js:23 [HMR]  - ../../../../../src/app/public/home/home.module.ts
log.js:23 [HMR]  - ../../../../../src/app/public/home/home.routing.ts
// Everything below here is NOT normal, bad!  All this is extra.  These are my modules, yes, but all this needs to be loaded again?
log.js:23 [HMR]  - ../../../../../src/$$_lazy_route_resource lazy recursive
log.js:23 [HMR]  - ../../../core/esm5/core.js
log.js:23 [HMR]  - ../../../platform-browser-dynamic/esm5/platform-browser-dynamic.js
log.js:23 [HMR]  - ../../../common/esm5/common.js
log.js:23 [HMR]  - ../../../platform-browser/esm5/platform-browser.js
log.js:23 [HMR]  - ../../../router/esm5/router.js
log.js:23 [HMR]  - ../../../../../src/app/shared/shared.module.ts
log.js:23 [HMR]  - ../../../common/esm5/http.js
log.js:23 [HMR]  - ../../../../../src/app/features/proxy-http-interceptor/proxy-http-interceptor.ts
log.js:23 [HMR]  - ../../../../../src/app/shared/unauthorized-http-interceptor.ts
log.js:23 [HMR]  - ../../../../../src/app/features/auth/auth.service.ts
log.js:23 [HMR]  - ../../../../../src/app/features/user/user.service.ts
log.js:23 [HMR]  - ../../../../@auth0/angular-jwt/index.js
log.js:23 [HMR]  - ../../../../@auth0/angular-jwt/src/jwt.interceptor.js
log.js:23 [HMR]  - ../../../../@auth0/angular-jwt/src/jwthelper.service.js
log.js:23 [HMR]  - ../../../../@auth0/angular-jwt/src/jwtoptions.token.js
log.js:23 [HMR]  - ../../../../../src/app/shared/container.directive.ts
log.js:23 [HMR]  - ../../../flex-layout/esm5/flex-layout.es5.js
...
...
A ton more logging

推荐答案

不建议使用angular-cli Wiki页面: https://github.com. com/angular/angular-cli/issues/14053

当前不支持Angular-HMR +惰性路由: https://github. com/PatrickJS/angular-hmr/issues/76

Angular-HMR + lazy routes is currently not supported: https://github.com/PatrickJS/angular-hmr/issues/76

有关有效且不平凡的解决方案,请查看 https://github.com/wags1999/angular-hmr-lazy-components

For a working and non-trivial solution, have a look to https://github.com/wags1999/angular-hmr-lazy-components

这篇关于带有延迟加载路由的Angular CLI HMR可热重新加载整个内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-26 03:18