Saltar al contenido

¿Cómo evitar la caché del navegador en el sitio de Angular 2?

Solución:

angular-cli resuelve esto proporcionando un --output-hashing marca para el comando de compilación (versiones 6/7, para versiones posteriores, consulte aquí). Uso de ejemplo:

ng build --output-hashing=all

Bundling & Tree-Shaking proporciona algunos detalles y contexto. Corriendo ng help build, documenta la bandera:

--output-hashing=none|all|media|bundles (String)

Define the output filename cache-busting hashing mode.
aliases: -oh <value>, --outputHashing <value>

Aunque esto solo es aplicable a los usuarios de angular-cli, funciona de manera brillante y no requiere ningún cambio de código ni herramientas adicionales.

Actualizar

Varios comentarios han amablemente y correctamente señaló que esta respuesta agrega un hash a la .js archivos pero no hace nada por index.html. Por tanto, es muy posible que index.html permanece en caché después de ng build caché rompe el .js archivos.

En este punto, me referiré a ¿Cómo controlamos el almacenamiento en caché de la página web, en todos los navegadores?

Encontré una manera de hacer esto, simplemente agregue una cadena de consulta para cargar sus componentes, así:

@Component({
  selector: 'some-component',
  templateUrl: `./app/component/stuff/component.html?v=${new Date().getTime()}`,
  styleUrls: [`./app/component/stuff/component.css?v=${new Date().getTime()}`]
})

Esto debería obligar al cliente a cargar la copia del servidor de la plantilla en lugar de la del navegador. Si desea que se actualice solo después de un cierto período de tiempo, puede usar esta ISOString en su lugar:

new Date().toISOString() //2016-09-24T00:43:21.584Z

Y subcadena algunos caracteres para que solo cambie después de una hora, por ejemplo:

new Date().toISOString().substr(0,13) //2016-09-24T00

Espero que esto ayude

En cada plantilla html, solo agrego las siguientes metaetiquetas en la parte superior:

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

Según tengo entendido, cada plantilla es independiente, por lo que no hereda la configuración de reglas de almacenamiento en caché en el archivo index.html.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *