Tengo una aplicación Angular 12 que tiene diferentes entornos de compilación (dev/staging/prod) y los configuré con hash de salida en angular.json :
"configurations": { "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "optimization": true, "outputHashing": "all" <-----Los archivos de salida incluyen un hash, pero sigo viendo la versión anterior a menos que haga una actualización completa en el navegador.
main.07258fce7f84f8b6013e.js polyfills.4cc5b416b55531e38cd8.js runtime.734c276f75a5d81bc54b.jsLa página de destino es solo un formulario de inicio de sesión, pero la versión se muestra debajo del formulario. Muestra la versión anterior hasta la actualización completa en el navegador, momento en el que muestra correctamente la nueva versión.
¿Esto se debe a que index.html se almacena en caché junto con todas sus antiguas referencias de JS?
Si es así, ¿cómo cacheo esto?
En caso de que esté utilizando un trabajador de servicio (por ejemplo, @angular/pwa que instala @angular/service-worker ), el navegador almacena en caché toda la aplicación angular. Esto incluye index.html + todos los archivos javascript + todas las hojas de estilo.
Para enviar una nueva versión de su aplicación a sus usuarios, debe hacer 2 cosas:
Actualice su ngsw-config.json en cada nueva versión:
{ "version": 1, // Or ascending ... } Llame SwUpdate :
constructor(private swUpdate: SwUpdate) { ... //#region Check for updates if (this.swUpdate.isEnabled) { this.swUpdate.activated.subscribe((upd) => { window.location.reload(); }); this.swUpdate.available.subscribe((upd) => { this.swUpdate.activateUpdate(); }, (error) => { console.error(error); }); this.swUpdate.checkForUpdate().then(() => { }).catch((error) => { console.error('Could not check for app updates', error); }); } //#endregion }Pude resolver esto instruyendo a la política de control de caché del servidor web para que no almacene en caché el archivo HTML. Esto es necesario porque el archivo HTML contiene las referencias a los scripts hash de Angular y CSS.
Estamos lanzando actualizaciones frecuentes, así que por ahora, estoy configurando esto para que no se almacene en caché, pero se puede ajustar a períodos de tiempo más largos según sea necesario.
En nuestro caso, usamos IIS y tuve que crear una regla de reescritura de IIS en el archivo web.config.
<outboundRules> <rule name="RewriteCacheControlForHTMLFiles" preCondition="FileEndsWithHtml"> <match serverVariable="RESPONSE_Cache_Control" pattern=".*" /> <action type="Rewrite" value="max-age=0" /> </rule> <preConditions> <preCondition name="FileEndsWithHtml"> <add input="{REQUEST_FILENAME}" pattern="\.html$" /> </preCondition> </preConditions> </outboundRules>