(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
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
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