Search code examples
htmlangularcachingbrowser-cachecache-control

Angular: When image is removed and re-added, it doesn't create new request, and doesn't honor the cache-control header

I have a very simple angular project, with interval that cyclic add an image and remove it after some seconds.

The image have an header Cache-control: max-age: 60.

I'm monitoring the request that the page sends, and I see that it creates only one request for the first time the image is added.

After the first request, the page never validate the image freshness. So, if I replace the image at the server, the client never get the new image.

What is the reason, and what I can do?

Sample project:

https://stackblitz.com/edit/angular-cache-control?file=src%2Fapp%2Fapp.component.html

Solution

  • My answer: It is not possible.

    Probably, the brwoser has a cache ending that save the image, even after it is removed from DOM. So, when I add he image again to the DOM, the browser doesn't create a new request.