Search code examples
jsonangularnginxbrowser-cacheangular-i18n

Angular i18n json cache issues using nginx


I'm using angular with i18n translations in json files like de.json and en.json. In my production environment (nginx) I have the problem that these JSON files are cached by the web browser. After an upgrade, Chrome will not download the new version of the current json file even though the date header has changed.

Request Information (Chrome):

Response Headers:

  • content-encoding: gzip
  • content-type: application/json
  • date: Fri, 15 Feb 2019 09:04:42 GMT
  • etag: W/"5c62bf4d-2aea"
  • last-modified: Tue, 12 Feb 2019 12:42:53 GMT
  • server: nginx/1.14.0 (Ubuntu)
  • status: 304

Does anyone have experience with this problem and can help me?


Solution

  • Not specifically a fix for Angular/nginx, but a practice I often use is to append a query string parameter to the resource when you load it. For me, this is typically derived from version number of the .js file / application, e.g. using it as a seed for a RNG

    So, instead of: <script src="/assets/de.json" />

    use <script src="/assets/de.json?_=12345" />

    Bonus points- in your Angular application, you can keep track of what version of the assets that you want to include, meaning that you can release new asset files without having clients immediately update to them if they have them in local cache (although note that new clients will get the new version regardless)