问具有延迟加载路由的Angular CLI HMR热重新加载整个过程
EN

Stack Overflow用户

提问于 2018-01-13 09:36:38

回答 2查看 4.1K关注 0票数 65

(即使在Angular 7中也确认了一个问题)。让我们来解决这个问题吧！

我使用的是HMR，就像这里设置的那样:来自全新ng new构建的https://github.com/angular/angular-cli/wiki/stories-configure-hmr。

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

angular