web-dev-qa-db-fra.com

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

(Confirmé un problème même avec Angular 7). Corrigeons cela!

J'utilise HMR comme configuré ici: https://github.com/angular/angular-cli/wiki/stories-configure-hmr à partir d'un _ ng new construire.

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

Je le sais car il est configuré par défaut sur console.log chaque module en cours de rechargement, et lorsque j'utilise une route paresseuse, il enregistre tout. Mais lorsque je modifie ce composant en 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 s'actualiser. C'est énervant.

Y a-t-il un moyen de contourner cela?

(Les itinéraires de chargement paresseux sont réalisés par quelque chose comme ça)

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

(juste un exemple pour montrer que je charge paresseusement dans le bon sens)

Voici quelques journaux pour montrer ce qui se passe lorsque je charge paresseusement le 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
angularangular-cliangular7webpack-hmrhot-module-replacement
53
Augie Gardner

Faites d'abord ce futur tutoriel: https://angular.io/guide/lazy-loading-ngmodules

Faites ensuite étape par étape ce tutoriel: https://github.com/angular/angular-cli/wiki/stories-configure-hmr

Dans un projet que vous réalisez déjà. Assurez-vous de télécharger bootstrap correct !!! Il ne peut pas être codé en dur.

En fait, c'est comme si nous avions par défaut console.log (). After /$$_lazy_route_resource le navigateur de ligne récursif paresseux ne télécharge rien d'autre. Vous avez approuvé qui fonctionne ci-dessous sur la photo

enter image description hereAngular7 Lazy hmr

1
Mises

Cette page wiki angular-cli est déconseillée: https://github.com/angular/angular-cli/issues/1405

Les routes angulaires-HMR + paresseux ne sont actuellement pas prises en charge: https://github.com/PatrickJS/angular-hmr/issues/76

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

0
Nico Toub