Search code examples
angular.net-coreangular-clibrowser-cache

Cache busting index.html in a .Net Core Angular 5 website

I am creating a website using .Net core and angular 5. I created the project using the latest .Net core angular template (using dotnet new angular with .Net core 2.1 installed).

This project uses the angular cli to build/package and applies a hash onto the bundled js and css files:

enter image description here

However after publishing my site to an azure app service I found that when I browsed to the site I would see the old version until I manually refreshed with F5 (Ctrl-F5 wasn't necessary). This seems to be because although the js/css files wont be cached, the index.html page which contains the references to these files will be served from the cache.

When I press F5 to reload the website the index.html (home below) is requested from the site (304 in this case as it hasn't changed, if it has it will get the latest):

enter image description here

However when I initially load the page (via a bookmark or typing in the address etc) the page is directly served from cache:

enter image description here

Is this expected behaviour? Why is it different loading the page for the first time vs pressing F5? And can I/should I prevent this caching?

Solution

  • Not a neat or perfect solution but this seems to have worked and might get people on the right track:

    In Configure() in Startup.cs I added this

    app.Use(async (c, next) =>
{
    if (c.Request.Path == "/")
    {
        c.Response.Headers.Add("Cache-Control", "no-store,no-cache");
        c.Response.Headers.Add("Pragma", "no-cache");
    }
    await next();
});

    Since adding this I haven't been able to reproduce my issue.