servidor - publicar proyecto angular 5

CLI HMR angular con rutas cargadas de manera lenta recarga todo

Question

(Se confirmó un problema incluso con Angular 7). ¡Arreglemos esto!

Estoy usando HMR tal como está configurado aquí: https://github.com/angular/angular-cli/wiki/stories-configure-hmr de una ng new versión ng new .

Si cambio algún componente y lo hago con carga lenta, el HMR angular volverá a cargar todo, haciendo que la sincronización de la página sea más lenta.

Sé esto porque está configurado de forma predeterminada para console.log cada módulo que se está volviendo a cargar, y cuando estoy usando una ruta diferida, registra todo. Pero cuando cambio ese componente a carga no lenta, solo registra unos pocos componentes pequeños.

Por lo tanto, cuando uso HMR y rutas diferidas, mi aplicación tarda unos segundos más en actualizarse. Esto es molesto.

¿Hay alguna forma de evitar esto?

(Las rutas de carga diferida se logran con algo como esto)

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

(solo un ejemplo para mostrar que estoy cargando perezoso de la manera correcta)

Aquí hay algunos registros para mostrar lo que sucede cuando perezosamente cargo el 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

Esta https://github.com/angular/angular-cli/wiki/stories-configure-hmr está en desuso: https://github.com/angular/angular-cli/issues/14053

Las rutas perezosas Angular-HMR + actualmente no son compatibles: https://github.com/PatrickJS/angular-hmr/issues/76

Para una solución funcional y no trivial, eche un vistazo a https://github.com/wags1999/angular-hmr-lazy-components

Answer 2

Primero haga este futuro tutorial: https://angular.io/guide/lazy-loading-ngmodules

Luego, haga este tutorial paso a paso: https://github.com/angular/angular-cli/wiki/stories-configure-hmr

En un proyecto que ya estás haciendo. Asegúrate de descargar bootstrap correcto !!! No puede ser codificado.

En realidad es como si tuviéramos la consola predeterminada.log (). After /$$_lazy_route_resource lazy recursive line browser no está descargando nada más. Tengo que aprobar que está funcionando a continuación en la foto

Answer 3

Solo como una advertencia para la gente que tiene este problema. hmr angular-cli y hmr dejó de funcionar. Todo lo que mostró es una página vacía.

Trabajando:

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

No funciona:

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