Lazy-Loaded 경로가있는 Angular CLI HMR은 모든 것을 핫 리로드합니다.

Lazy-Loaded 경로가있는 Angular CLI HMR은 모든 것을 핫 리로드합니다.

---

(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

---

이 angular-cli 위키 페이지 는 더 이상 사용되지 않습니다 : 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를 살펴보십시오.

---

이 문제를 겪는 사람들에게 경고하는 것처럼. 업데이트 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",

참고URL : https://stackoverflow.com/questions/48236160/angular-cli-hmr-with-lazy-loaded-routes-hot-reloads-the-whole-thing