2

Tengo un proyecto en angular 8 y C# WebApi el cual publico en un servidor IIS, hasta este punto todo bien, cuando realice la primera publicación no hubo problema pero Al momento de realizar cambios en mi aplicación y volver a generar los archivos, digamos al publicar la Versión 2, no toma los cambios realizados en mí FrontEnd Angular al ingresar a la aplicación, solo lo hace cuando recargo la página con ctrl + Shift + R.

Esto es un gran problema para los usuarios que utilizan la aplicación ya que si no recargan seguirán trabajando en la primera versión.

Esta es la forma en la que genero los archivos:

ng build --prod --output-hashing=all

Esta línea me genera los siguientes archivos:

introducir la descripción de la imagen aquí

Tengo estas líneas de código en el index.html

<meta http-equiv="Expires" content="0">
<meta http-equiv="Last-Modified" content="0">
<meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">

No sé que pasa pero solo toma la nueva versión solo si se recarga la página de esa forma.

Edicion:

Este es mi archivo WebConfig:

<?xml version="1.0" encoding="utf-8"?>
<configuration>

<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <!-- <action type="Rewrite" url="./index.html" /> -->
        <action type="Rewrite" url="/" />
      </rule>
    </rules>
  </rewrite>
   <caching>         
       <profiles>
         <add varybyquerystring="*" location="Any"
           duration="00:00:01" policy="CacheForTimePeriod">
       </profiles>
     </caching>
</system.webServer>

</configuration>

Me gustaría que limpiara y forzara y la cache al momento de generar los archivos.

¿Existe alguna forma de hacer esto desde código o al generar los archivos ?

3
  • Relacionada: es.stackoverflow.com/questions/45635/… el 9 dic. 2019 a las 17:32
  • @PabloLozano agrego lo que dan en la respuesta , pero aun sigue sin funcionar lo actualiza con el Ctrl + shif + R el 9 dic. 2019 a las 19:37
  • En este link te muestran una solución bastante interesante, a través del hash de la aplicación verifica si ha cambiado y si es diferente entonces ejecuta la acción de reload o puedes mostrar una ventana notificando. blog.nodeswat.com/… el 11 dic. 2019 a las 14:26

3 respuestas 3

1

Este problema me ocurría frecuentemente con aplicaciones puestas en producción, y básicamente es debido al mecanismo de caché del navegador, hay diversas formas de lidiar con este problema desde el servidor diciendo al navegador cuál debe ser su política para el caché. Sin embargo una buena solución y que además te da otras ventajas es convertir tu aplicación en PWA, esto te permité enviar incluso un mensaje cuando hay una nueva versión de la aplicación disponible.

Esto se logra a través de la implementación de un Service Worker https://developer.mozilla.org/es/docs/Web/API/Service_Worker_API/Using_Service_Workers

El siguiente artículo me ayudó bastante a convertir y entender que es lo que hace una PWA https://blog.angular-university.io/angular-service-worker/

En resumen podrías ejecutar:

ng add @angular/pwa --project <name of project as in angular.json>

Lo anterior convertirá tu aplicación a PWA y agregará algunos archivos de configuración, la CLI de Angular hará todo el trabajo. Luego de esto podrías hacer algo como esto en tu app.component.ts:

constructor(
    private swUpdate: SwUpdate
) {
    if (this.swUpdate.isEnabled) {

        this.swUpdate.available.subscribe(() => {

            if (confirm('New version available. Load new version?')) {

                window.location.reload();
            }
        });
    }

El servicio que estás inyectando lo podrás importar luego de agregar @angular/pwa

import { SwUpdate } from '@angular/service-worker';

Espero pueda ayudarte, coméntame si tienes alguna duda al respecto, también puedes chequear los enlaces que te dejé arriba.

4
  • 2
    Aunque extenso tu aporte me parece más un comentario con algunos enlaces que una respuesta concreta en si, por favor lee Cómo responder
    – BetaM
    el 9 dic. 2019 a las 22:03
  • No hay una respuesta concreta para este tema, hay múltiples enfoques y los enlaces que referí responden exactamente este problema. Por favor lee acerca del tema y me disculpo si mi respuesta no fué adecuada. el 10 dic. 2019 a las 14:21
  • El te esta haciendo una sugerencia en la cual deberías de editar tu pregunta, para no solo poner los enlaces ya que estos tienden a desaparecer, seria bueno un ejemplo de como implementar la solución. el 10 dic. 2019 a las 21:54
  • 2
    He modificado la respuesta en espera de que pueda ser de ayuda. Cualquier duda o sugerencia es bien recibida. el 11 dic. 2019 a las 16:11
0
+50

Configura el caching de tu IIS desde el web config de tu aplicación. Esto sobrescribirá cualquier configuración del Output Cache que tengas a nivel de servidor:

<configuration>
  <system.webServer>
    <staticContent>
       <clientCache cacheControlMode="DisableCache" />
    </staticContent>
  </system.webServer>
</configuration>

Puedes filtrar también por extensión para que se cacheen ciertos archivos estáticos.

5
  • Dentro de mi WebConfig, tengo esto <system.webServer> <rewrite> <rules> <rule name="Angular Routes" stopProcessing="true"> no hay ningun problema al agregar el caching ? el 9 dic. 2019 a las 21:42
  • Las reglas de reescritura mantenlas también. Estas reglas son necesarias para que todas las urls vayan a index
    – Alpha75
    el 9 dic. 2019 a las 21:47
  • Agrege el codigo, genere los archivos y al publicar me genera el error 500 - Internal server error. , Edite mi pregunta para que puedas ver el archivo webConfig el 9 dic. 2019 a las 21:58
  • He editado el web config. Puedes hacer una prueba?
    – Alpha75
    el 9 dic. 2019 a las 22:26
  • Dame un momento el 9 dic. 2019 a las 22:27
0

Es complicado este tema, en todos los sitios en los que he trabajado ya tenían este problema... Y sólo he visto una posible solución... Y es poner una variable al final del include de modo que cada vez que esta cambie (en cada publicación) también cambiarán los archivos incluidos.

Pero ya te digo, los que ya están descargados, no se obtendrán por sí solos esta modificación, vas a tener que hacer algún cambio drástico que necesiten tener la última versión si o si.

Podrías probar, a poner el app_offline.htm en el IIS para poder hacer un reset, pero creo que todo cliente que no entre, no se refrescará la caché.

Te pongo un ejemplo de lo que menciono más arriba.

<script src="utilidades.js" />

Por:

<script src="utilidades.js?V=1.2" />

Espero que te haya ayudado con esto, un saludo!

5
  • A que include tendría que agregar la variable ? el 9 dic. 2019 a las 22:01
  • Pues a todos los que tengas en el index.html (css y js, imágenes no recuerdo), además teniendo las variables para evitar el caché en los meta, te dejo un ejemplo: <meta http-equiv="cache-control" content="max-age=0" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> <meta http-equiv="pragma" content="no-cache" /> el 9 dic. 2019 a las 22:05
  • He agregado a cada include la variable, toma perfectamente los cambios en los css y js pero no en los Component de Angular el 9 dic. 2019 a las 22:13
  • Hace unos días vi un script que recorría los componentes... Imagino que con eso se podría ver, intentaré localizarlo y te lo hago llegar :) el 9 dic. 2019 a las 22:16
  • Una pregunta tonta, en cada publicación limpias el directorio de publicación antes no? Porque las publicaciones de Angular, suelen generar los JS con nombres distintos También se me ocurre.. Tener un código JS que obtenga todos las etiquetas <script con propiedad src, y añadirle la variable al final.. Ya me voy a dormir, si necesitas ayuda, mañana lo vemos el 9 dic. 2019 a las 22:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.