Angular CLI HMR avec routes Lazy-Loaded recharge à chaud le tout

Question

(Confirmation d'un problème même avec Angular 7). Faisons en sorte que cela soit corrigé !

J'utilise le HMR pour la mise en place ici : https://github.com/angular/angular-cli/wiki/stories-configure-hmr d'un nouveau ng new construire.

Si je modifie un composant et le rend paresseux, angular HMR va tout recharger à chaud, ce qui rend la synchronisation de la page plus lente.

Je le sais parce que c'est configuré par défaut pour console.log chaque module qui est rechargé, et quand j'utilise une route paresseuse, il enregistre tout. Mais lorsque je modifie ce composant pour le rendre non paresseux, il n'enregistre que quelques petits composants.

Par conséquent, lorsque j'utilise HMR et des itinéraires paresseux, mon application prend quelques secondes de plus pour se rafraîchir. C'est ennuyeux.

Y a-t-il un moyen de contourner ce problème ?

(Le chargement paresseux des routes est accompli par quelque chose comme ceci)

// Main homepage
{
  path: '',
  loadChildren: './public/home/home.module#HomeModule'
},
// ...

(juste un exemple pour montrer que je fais du lazy-loading de la bonne manière)

Voici quelques logs pour montrer ce qui se passe quand je charge paresseusement le fichier 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

Ce site page wiki angular-cli est déprécié : https://github.com/angular/angular-cli/issues/14053

Angular-HMR + routes paresseuses n'est pas pris en charge actuellement : https://github.com/PatrickJS/angular-hmr/issues/76

Pour une solution fonctionnelle et non triviale, consultez le site suivant https://github.com/wags1999/angular-hmr-lazy-components

Answer 2

Juste pour avertir les personnes qui rencontrent ce problème. J'ai mis à jour angular-cli y hmr a cessé de fonctionner. Tout ce qu'il a montré est une page vide.

Travailler :

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

Ne fonctionne pas :

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