带有延迟加载路由的 Angular CLI HMR 热重载整个过程 [英] Angular CLI HMR with Lazy-Loaded routes hot-reloads the whole thing
问题描述
(即使使用 Angular 7 也确认了一个问题).让我们解决这个问题！
(Confirmed an issue even with Angular 7). Let's get this fixed!
我正在使用此处设置的 HMR:https://github.com/angular/angular-cli/wiki/stories-configure-hmr 来自全新的 ng new 构建.
I'm using HMR as set up here: https://github.com/angular/angular-cli/wiki/stories-configure-hmr from a fresh ng new build.
如果我更改任何组件并使其延迟加载，Angular 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/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 热重载整个过程的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
