带有延迟加载路由的 Angular CLI HMR 热重载整个事情

Posted 2023-03-15

【中文标题】带有延迟加载路由的 Angular CLI HMR 热重载整个事情

【英文标题】：Angular CLI HMR with Lazy-Loaded routes hot-reloads the whole thing

【发布时间】：2018-06-22 12:00:24

【问题描述】：

（即使使用 Angular 7 也确认了一个问题）。让我们解决这个问题！

我正在使用此处设置的 HMR：https://github.com/angular/angular-cli/wiki/stories-configure-hmr 来自新的 ng new 构建。

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

我知道这一点，因为它默认设置为 console.log 正在重新加载的每个模块，并且当我使用惰性路由时，它会记录所有内容。但是当我将该组件更改为非延迟加载时，它只会记录几个小组件。

因此，当我使用 HMR 和惰性路由时，我的应用需要几秒钟才能刷新。这很烦人。

有没有办法解决这个问题？

（懒加载路由就是这样完成的）

// Main homepage

  path: '',
  loadChildren: './public/home/home.module#HomeModule'
,
// ...

（只是一个示例，说明我正在以正确的方式进行延迟加载）

这里有一些日志显示当我延迟加载 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 4.1 CLI 项目中也看到了这种行为。它几乎使 HMR 毫无用处。你有想过这个吗？

Angular 5.2 也有类似的问题。使用预先加载的模块，它可以按我的预期工作，但是在延迟加载模块中对组件的 sass 文件进行微小更改后，我得到了大量更新，并且在我的根 app.component 中维护的状态丢失了。我希望我能解决这个问题，否则 HMR 没有任何好处。其他人有这个/解决了这个吗？

在 Angular 5.2.3 上也是一样，HMR 没有用，因为它会重新加载应用程序

我在 Angular 6.1.9 (CLI 6.2.4) 上看到了相同的行为。有人找到解决方案了吗？

我对 Angular 7 也有同样的问题

【参考方案1】：

此angular-cli wiki page 已弃用：https://github.com/angular/angular-cli/issues/14053

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

如需有效且重要的解决方案，请查看https://github.com/wags1999/angular-hmr-lazy-components

【讨论】：

我之前也注意到了“解决方案”，在这里提出：github.com/wags1999/angular-hmr-lazy-components，这有点麻烦。虽然我试图在当前项目中实施它但没有成功，但基于 cmets，我相信它可以在不太复杂的项目上工作。但是，由于“解决方案”的总体复杂性及其实施的总体混乱，我认为这不能被授予这个 SO 问题的“解决方案”。

不起作用，请参阅此处：***.com/questions/55355133/…

【参考方案2】：

作为对遇到此问题的人们的警告。我更新了angular-cli 和hmr 停止工作。它显示的只是空白页。

工作：

"@angular-devkit/build-angular": "0.10.2",
"@angular/cli": "^7.0.3",
"@angular/compiler-cli": "^7.0.3",

不工作：

"@angular-devkit/build-angular": "~0.6.8",
"@angular/cli": "~7.0.6",
"@angular/compiler-cli": "^7.1.0",