Angular doesn't update page with cache enabled

There are specific reasons that none of the things that you've tried have fixed things.

First of all, using the <caching> element in web.config does not instruct the browser on how to cache the response. It is used to configure how the IIS server caches the response so that it might be re-used in future requests. Here is the documentation that explains that.

Next, your <meta> tags. Normally, cache control is done by actual http headers. While you can use <meta> tags to set headers that are not specified at all in your http response header, they will NOT override http headers that are already being set. IIS has default values for caching in the response headers, your <meta> tags will not actually do anything. <meta> tags are really only reliably useful when you're loading over a file:/// url.

In order to reliably achieve what you're trying to do, you need to actually get the server to send the cache-control headers that you want to use. This can vary depending on what browsers you're trying to support, but since you're using angular, I might assume that you're supporting modern browsers, which is simple. The following will disable caching for ALL static files in your website, which probably isn't exactly what you want but might serve as a guide.

<?xml version="1.0" encoding="UTF-8"?><configuration>  <location path=".">    <system.webServer>      <staticContent>        <clientCache cacheControlMode="DisableCache" />      </staticContent>    </system.webServer>  </location></configuration>

However, the first thing you should be doing is examining the current response headers that IIS is sending you! This can be done easily using the Chrome developers tools. If you are seeing a Cache-Control: header in the response, this will confirm my reasoning about why your <meta> tags aren't working.

If you're generating the HTML for your angular application not with a static .html file but instead are generating it using ASP.NET, your best bet is to add code into your controller that sets the cache header.

Response.Cache.SetCacheability(HttpCacheability.NoCache);

If you want to support much older or broken browsers, there are other resources out there that describe what extra headers you will need to add, which again can be done using web.config or ASP.NET code. I just want to re-iterate: If you're still having problems sure that you are viewing the response headers being sent by the server.

For ASP.NET pages you don't want cached anywhere,

HttpContext.Current.Response.Cache.SetCacheability                            (HttpCacheability.Server);HttpContext.Current.Response.Cache.SetNoStore();Response.Cache.SetExpires(DateTime.Now); Response.Cache.SetValidUntilExpires(true); 

This tells any caching proxy servers that only the server is allowed to cache the page and tells the server not to cache it. The latter two lines of code ask the browser not to cache it. The code above leads to these three headers:

 Cache-Control:no-cache, no-store Pragma:no-cache Expires:-1

You can also add something unique to the query string to prevent browser caching.

.post(this.API + "/products/store?unique=milliseconds", body, {headers: headers} )

Append a parameter with a full time stamp or a unique id to every http call that you don't want to cache. Works like a champ. I used to have the same issue using templates in Angular. I just added an http interceptor and appended a timestamp to every call and the issue disappeared.