How to make index.html not to cache when the site contents are changes in AngularJS website?

Yes, that is the correct way. You have to set the Cache-Control header to let the browsers know that they don't have to cache any content for that request.

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

(Pragma & Cache-Control is one and the same thing but from the different HTTP specification. See the answer here: Difference between Pragma and Cache-control headers?)

See one of the related answer here: How to burst yeoman index.html cache


As mentioned in the comments it's really the server configuration you want to be looking at but you haven't mentioned your setup. We run our AngularJS site with a .NET backend using IIS.

We update our site regularly and have had issues in the past with JS and CSS resources caching but we've solved it through the following settings:

Build

We use gulp to build our AngularJS application and as part of that we append a version number to the querystring of our main application CSS and Javascript files that change frequently. For example:

<link href="css/default.min.css?v=2" rel="stylesheet" />

Server Configuration

In the root web.config we specify that we don't want to the index.html to cache by setting the cache-control, Pragma and Expires request headers as well as the max-age to 0.

<location path="index.html">
<system.webServer>
  <staticContent>
    <clientCache cacheControlMode="DisableCache" cacheControlMaxAge="0.00:00:00" />
  </staticContent>
    <httpProtocol>
        <customHeaders>
            <add name="Cache-Control" value="no-cache, no-store, must-revalidate" />
            <add name="Pragma" value="no-cache" />
            <add name="Expires" value="-1" />
        </customHeaders>
    </httpProtocol>  
</system.webServer>
</location>

References:

  • IIS Client Cache: https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/clientcache
  • Cache-Control HTTP Header : https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
  • Pragma HTTP Header: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Pragma
  • Expires HTTP Header: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Expires

By setting content value to 0, browsers will always load the page from the web server.

<meta http-equiv="expires" content="0">

Tags:

Html

Deployment

Caching

Angularjs

Recent Posts