En Angular 2, ¿cómo se borra la memoria caché de la plantilla? Hay toneladas de respuestas para Angular 1, pero ninguna para 2.
El problema que tengo es que cuando cambio el contenido de las páginas html a las que hace referencia templateUrl en cualquier componente, las páginas html no cambian en el navegador hasta que navego manualmente a templateUrl en el navegador y presiono recargar. Sé que puede deshabilitar el caché del navegador para resolver esto durante el desarrollo, pero mi preocupación es que los usuarios pueden ver una página html desactualizada si la tienen en caché en su navegador cuando voy a actualizar un sitio web con Angular 2.
Aquí hay un enlace a las preguntas de desbordamiento de pila para Angular 1 AngularJS deshabilita el almacenamiento en caché parcial en la máquina de desarrollo
A continuación se muestra un fragmento y tengo problemas con la actualización de app.html cuando se cambia su contenido.
@Component({ selector: 'photogallery-app', templateUrl: './app/app.html', directives: [ROUTER_DIRECTIVES, CORE_DIRECTIVES] })Primero importa el TemplateCompiler.
import { TemplateCompiler } from 'angular2/src/compiler/template_compiler';A continuación, inyecte TemplateCompiler en su constructor.
constructor(private _templateCompiler: TemplateCompiler)Finalmente use eso para borrar el caché. Tenga en cuenta que esto borra todas las plantillas.
this._templateCompiler.clearCache();ACTUALIZACIÓN: Angular 2 Beta 17
Primero importa el RuntimeCompiler.
import { RuntimeCompiler} from 'angular2/src/compiler/runtime_compiler';A continuación, inyecte RuntimeCompiler en su constructor.
constructor(private _runtimeCompiler: RuntimeCompiler)Finalmente use eso para borrar el caché. Tenga en cuenta que esto borra todas las plantillas.
this._runtimeCompiler.clearCache();ACTUALIZACIÓN: Angular 2 RC 1
Primero importa el RuntimeCompiler.
import { RuntimeCompiler} from '@angular/compiler/src/runtime_compiler';A continuación, inyecte RuntimeCompiler en su constructor.
constructor(private _runtimeCompiler: RuntimeCompiler)Finalmente use eso para borrar el caché. Tenga en cuenta que esto borra todas las plantillas.
this._runtimeCompiler.clearCache();ACTUALIZACIÓN: Angular 2 RC 4
Primero importa el RuntimeCompiler.
Observe el cambio de ruta desde RC1. La ruta indicada para RC1 arrojará errores al llamar a .ClearCache() si se usa con RC4
import { RuntimeCompiler} from '@angular/compiler';A continuación, inyecte RuntimeCompiler en su constructor
constructor(private _runtimeCompiler: RuntimeCompiler)Finalmente use eso para borrar el caché. Tenga en cuenta que esto borra todas las plantillas.
this._runtimeCompiler.clearCache();ACTUALIZACIÓN: Angular 2.0.0 (RTM)
No se puede hacer. Tengo una aplicación que sirve un conjunto de plantillas para usuarios registrados y otro conjunto para aquellos que no han iniciado sesión. Después de actualizar a 2.0.0, no veo forma de realizar la misma tarea. Mientras trato de encontrar la mejor manera de rediseñar la aplicación, he recurrido a esto en su lugar:
location.reload();Eso funciona (pero obviamente recarga toda la página).
En Angular 2.0.2 podemos borrar la caché de plantillas de la siguiente manera:
Importar:
import { Compiler } from '@angular/core';Inyector de dependencia:
constructor(private _compiler: Compiler) { }Uso:
this._compiler.clearCache();Nota: Creo que esta solución funciona desde Angular 2.0.0 (RTM)
Actualizar
En las versiones actuales (4.x) de Angular
clearCache()ya no funciona. Esto ya se informó en Angular Github (por @Olezt) y posiblemente se corregirá en el futuro.
Explicación del propósito funcional del método clearcache() :
Otra pregunta que no está clara es el propósito funcional del método clearCache clearCache() , clearCache() tiene la responsabilidad de eliminar templateUrl , stylesUrl , etc. especificados en @Component . (Lo uso para descartar la vista cargada en templateUrl y solicitar una vista actualizada del servidor, en mi proyecto, la vista resultante de esta solicitud cambia de acuerdo con el intercambio de usuarios/permisos, por ejemplo. Por lo tanto, es necesario descartar la cargada previamente. )
clearCache() no tiene acción en el caché del navegador, ni nada más allá de Angular, solo actúa en @Component , @NgModule , etc. Cachés angulares, nada más.
En Angular 5.X podemos usar el compilador de la misma forma que en 2.0.
Importar el compilador:
importar { Compilador } desde '@angular/core';
Inyecte la dependencia en el constructor de su componente:
constructor(privado _compiler: Compilador) { }
Borrar el caché:
este._compilador.clearCache();