带有Lazy-Loaded路由的Angular CLI HMR热重新加载整个事件

Question

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

我在这里设置了HMR：来自新ng new版本的https://github.com/angular/angular-cli/wiki/stories-configure-hmr。

如果我更改了任何组件并使其延迟加载，角度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

Answer 1

首先制作此未来教程：https://angular.io/guide/lazy-loading-ngmodules

然后逐步制作本教程：https://github.com/angular/angular-cli/wiki/stories-configure-hmr

您已经在制作一个项目。确保您下载的引导程序正确！不能进行硬编码。

实际上，就像我们得到了默认的console.log（）一样。 After /$$_lazy_route_resource惰性递归行浏览器未下载其他任何内容。得到批准，下面的图片可以正常工作

Answer 2

此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

Answer 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",