In the Angular Framework, the TranslateModule is commonly used to support multiple languages by managing translation string in json files for each locale.

A frequent issue, however, is that updated translations may not appear in the application even after the json files have been changed.

This problem is caused by the browser caching the old files. Although disabling caching can solve this, a more effective solution exists.

Strategy

A good strategy is to implement versioning for the translation files. This forces the browser to download a new file only when its version has changed.

How?

1. Add a new property i18n_version in both environment.ts and environment.prod.ts.

export const environment = {
  production: false,
  i18n_version: 1
};

2. Reference this variable in the HttpLoaderFactory within app.module.ts to append it as a query parameter.

const HttpLoaderFactory = (http: HttpClient) => {
  return new TranslateHttpLoader(
    http,
    './assets/i18n/', 
    `.json?v=${ environment.i18n_version }`,
  );
};

By doing this, Every time you update i18n_version, the browser will fetch the updated i18n files instead of using its cache.