Angular clear browser cache

Question

After publishing a new version of my angular app I often see the old cached version until I hit Ctrl+F5 to clear it. To avoid that I have a version number in the angular app matching the .net core api project version. In the login page I call the api to get the version and if there is a mismatch I trigger window.reload(true). Is this approach alright or is there a better/simpler way?

Answer 1

In angular.json there is the configurations section which contains the production configuration. Here you can set outputHashing to value all and if you call ng build --prod the built file names will contain their hash in he dist folder. If the content of the file changes after a version update, the hash will be different it follows it will be downloaded.

An example:

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true
  }
}

Documentation about the referred build parameters can be found here.

However it is possible that the index.html itself will be cached (its file name is not hashed) and the content with the new hashes won't be downloaded because the browser uses the cached index.html with the cached angular contents. In this case the index.html should be served by the .NET backend with no-cache, no-store http header properties. Details about cache control here.