Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to clear template cache?

Tags:

angular

In Angular 2, how do you clear the template cache? There are tons of answers for Angular 1, but none for 2.

The issue I am having is that when I change the contents of the html pages referenced by templateUrl on any components, the html pages don't change in the browser until I manually navigate to the templateUrl in the browser and hit reload. I know you can disable the browser cache to solve this during development, but my concern is that users can see an outdated html page if they have it cached in their browser when I go to update a website with Angular 2.

Here is a link to the stack overflow questions for Angular 1 AngularJS disable partial caching on dev machine

Below is a snippet and I am having issues with app.html updating when its content is changed.

@Component({     selector: 'photogallery-app',     templateUrl: './app/app.html',     directives: [ROUTER_DIRECTIVES, CORE_DIRECTIVES] }) 
like image 817
Keith Neuse Avatar asked Jan 15 '16 09:01

Keith Neuse


People also ask

What is Template cache?

$templateCache is a Cache object created by the $cacheFactory. The first time a template is used, it is loaded in the template cache for quick retrieval. You can load templates directly into the cache in a script tag, by using $templateRequest , or by consuming the $templateCache service directly.

How do I clear my theme cache?

To clear your WordPress site's cache with The WP Super Cache plugin, on your WordPress dashboard, navigate to Settings, then Wp Super Cache, then click Delete Cache. W3 Total Cache is designed to enhance the user experience of your website by speeding up the loading speed of your content through CDN integration.

How do I clear the cache on my WP Rocket?

Clear cache on whole siteGo to Settings → WP Rocket → Dashboard tab and press the Clear cache button. Another way is via the WordPress tool bar (or admin bar). Roll over the WP Rocket menu link, and you will see a dropdown menu. Click on the Clear cache link.


1 Answers

First import the TemplateCompiler.

import { TemplateCompiler } from 'angular2/src/compiler/template_compiler'; 

Next inject the TemplateCompiler in your constructor.

constructor(private _templateCompiler: TemplateCompiler) 

Finally use that to clear the cache. Note this clears all templates.

this._templateCompiler.clearCache(); 

UPDATE: Angular 2 Beta 17

First import the RuntimeCompiler.

import { RuntimeCompiler} from 'angular2/src/compiler/runtime_compiler'; 

Next inject the RuntimeCompiler in your constructor.

constructor(private _runtimeCompiler: RuntimeCompiler) 

Finally use that to clear the cache. Note this clears all templates.

this._runtimeCompiler.clearCache(); 

UPDATE: Angular 2 RC 1

First import the RuntimeCompiler.

import { RuntimeCompiler} from '@angular/compiler/src/runtime_compiler'; 

Next inject the RuntimeCompiler in your constructor.

constructor(private _runtimeCompiler: RuntimeCompiler) 

Finally use that to clear the cache. Note this clears all templates.

this._runtimeCompiler.clearCache(); 

UPDATE: Angular 2 RC 4

First import the RuntimeCompiler.

Notice the path change from RC1. The path listed for RC1 will throw errors when calling .ClearCache() if used with RC4

import { RuntimeCompiler} from '@angular/compiler'; 

Next inject the RuntimeCompiler in your constructor

constructor(private _runtimeCompiler: RuntimeCompiler) 

Finally use that to clear the cache. Note this clears all templates.

this._runtimeCompiler.clearCache(); 

UPDATE: Angular 2.0.0 (RTM)

It cannot be done. I have an app that serves one set templates for logged in users, and another set for those not logged in. After upgrading to 2.0.0, I can see no way to accomplish the same task. While I try to figure out the best way to re-architect the application, I have resorted to this instead:

location.reload(); 

That works (but obviously reloads the entire page).

like image 154
James Avatar answered Sep 25 '22 09:09

James