Search code examples
angulartypescriptsvgservice-workerangular-service-worker

Angular Service Worker can't fetch SVG files

I use a service worker in my Angular app. All the files in my assets folder are cached, as declared in my ngsw-config.json file.

{
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
}

I have .svg and .png files in my assets folder. When I build my app for production and visit my site for the first time, eveything works fine, but as soon as I reload the page, I get the following error in my console.

enter image description here

Uncaught (in promise) Error: Hash mismatch (cacheBustedFetchFromNetwork)

This problem only occurs when the browser tries to fetch a .svg file. It works fine with .png files

I load all my .svg file inside of an <img> tag.

I wonder if I did something wrong, or if it is a problem with the Angular Service Worker?

Solution

  • I had the same problem, consider using the svg files inline and not like that: <img src="assets/imgs/img.svg" />

    Hope that helps