wake-up-neo.com

Angular CLI HMR mit Lazy-Loaded-Routen lädt das Ganze im laufenden Betrieb neu

(Bestätigt ein Problem auch mit Angular 7). Lassen Sie uns dieses Problem beheben!

Ich verwende HMR wie hier eingerichtet: https://github.com/angular/angular-cli/wiki/stories-configure-hmr aus einem neuen ng new Build.

Wenn ich eine Komponente ändere und sie faul lade, lädt angular HMR alles im laufenden Betrieb neu, wodurch die Seitensynchronisation langsamer wird.

Ich weiß das, weil es standardmäßig auf console.log Jedes Modul eingestellt ist, das neu geladen wird, und wenn ich eine Lazy Route benutze, protokolliert es alles. Wenn ich diese Komponente jedoch auf Nicht-Lazy-Loaded ändere, werden nur einige kleine Komponenten protokolliert.

Wenn ich HMR- und Lazy-Routen verwende, dauert die Aktualisierung meiner App daher einige Sekunden. Das ist nervig.

Gibt es einen Weg, dies zu umgehen?

(Lazy Laderouten wird durch so etwas erreicht)

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

(nur ein Beispiel, um zu zeigen, dass ich faul bin, den richtigen Weg zu finden)

Hier ist ein wenig Protokollierung, um zu zeigen, was passiert, wenn ich den home.component.ts - Code faul lade.

// 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
53
Augie Gardner

Machen Sie zuerst dieses zukünftige Tutorial: https://angular.io/guide/lazy-loading-ngmodules

Machen Sie dann Schritt für Schritt dieses Tutorial: https://github.com/angular/angular-cli/wiki/stories-configure-hmr

In einem Projekt machst du schon. Stellen Sie sicher, dass Sie bootstrap richtig herunterladen !!! Es kann nicht hart codiert werden.

Eigentlich ist es so, als hätten wir standardmäßig console.log (). After /$$_lazy_route_resource fauler rekursiver Zeilenbrowser lädt nichts anderes herunter. Habe die Genehmigung, die unten auf dem Bild funktioniert

enter image description hereAngular7 Lazy hmr

1
Mises

Diese angle-cli-Wiki-Seite ist veraltet: https://github.com/angular/angular-cli/issues/1405

Angular-HMR + Lazy-Routen werden derzeit nicht unterstützt: https://github.com/PatrickJS/angular-hmr/issues/76

Eine funktionierende und nicht triviale Lösung finden Sie unter https://github.com/wags1999/angular-hmr-lazy-components

0
Nico Toub