Angular CLI HMR与延迟加载路由热重载整个内容

Question

Angular CLI HMR与延迟加载路由热重载整个内容

angularangular-cliangular7webpack-hmrhot-module-replacement

65

(即使在Angular 7中确认问题)。让我们来解决这个问题!

我按照这里设置使用HMR：https://github.com/angular/angular-cli/wiki/stories-configure-hmr，从一个新的ng new构建开始。

如果我更改任何组件并将其惰性加载，angular 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

- Augie Gardner

7

我在一个Angular 4.1的CLI项目中也看到了这种行为，它几乎使热模块替换失去了作用。你有找出解决方法吗？ - richinator38

3

我也遇到了类似的问题，使用Angular 5.2。当一个模块被急切加载时，它的工作方式符合我的预期，但是当我对懒加载模块中组件的Sass文件进行微小更改时，会出现大量更新，并且在根app.component中维护的状态会丢失。希望能够解决这个问题，否则HMR没有好处。还有谁遇到过这个问题并解决了吗？ - IanT8

4

同样的问题出现在Angular 5.2.3上，HMR无用，因为它会重新加载应用程序。 - George Mavritsakis

2

我在使用Angular 7时遇到了相同的问题。 - Michalis

1

我可以在最近创建的Angular 7项目中确认这一点。由于这是一个相对较小的项目，我仍然受益于HMR（重新加载只需要几秒钟，而不是刷新所有内容需要更长时间），但是有一个关于为什么它不能正常工作的解释会很好。 - Alexei - check Codidact

显示剩余4条评论

2个回答

-3

提醒大家一下，如果你遇到这个问题。我更新了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",

- asdasd

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nico Toub · Accepted Answer

这个angular-cli wiki页面已经被弃用：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以获取可行的非平凡解决方案。