Remove Template cache on logout Angular.js

Question

How to remove Angular template cache once user clicks on logout? We did thorough research and tried to implement most of the solutions available out there. we tried following

HTML Meta Tags

<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

Server side

res.setHeader('cache-control', 'no-cache', 'no-store', 'must-revalidate');

Javascript

We tried to delete browser history as specified on this blog

Problem we are facing right now is when a user logs out from our app and press back button he is shown empty html templates as services are not cached how shall we make sure templates are not cached either?

Answer 1

I found a solution that resolve my problem, usign php, here How to clear browser cache with php?

I think you can set a http request to a file php using this headers: header("Cache-Control: no-cache, must-revalidate"); header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

In my case, all my app is on Angularjs but I connect to an api with php, so in that php I put the headers and it worked!

Hope you help!

Edit: My problem was on movile browser(IE edge of WindowsPhone10), and no more problems with this solution.

Answer 2

$templateCache is just a wrapper around $cacheFactory with a specific name. This is literally all of its code:

function $TemplateCacheProvider() {
  this.$get = ['$cacheFactory', function($cacheFactory) {
    return $cacheFactory('templates');
  }];
}

$cacheFactory has a removeAll() method. Try this, if you want to wire it up yourself (e.g. in a service into which you've injected $cacheFactory):

$cacheFactory('templates').removeAll();

But separately, maybe you want to disable caching entirely if your application is security-sensitive. You can do a reload() call on the entire browser to dump all local JS variables, and then your no-cache pragmas above on the actual HTTP-driven assets will do what you want.