Cache busting of JSON files in webpack

Question

I have the following code (written in typescript, but could be any JS variant):

this.http.get('configs/config.json').subscribe(...);

Basically, I'm loading a configuration from a local json file. I would like to have cache busting implemented on the file. Although I can set up my webpack to modify json files by adding a hash suffix, I would also need to modify all the source files which have references to those files. string-replace-loader might do the job, but doing this feels bit odd.

Additionally, in some cases I don't have access to the code lines that make the http call to resource (third-party plugin for e.g. translation that load something like i18n/[lang].json so I can't directly modify code and/or name (and thus content hash) is only known in the run-time.

Is there something like URL rewrite for webpack that could solve this?

Answer 1

You can use query-params in the URL to avoid caching. No need to change the filename.

this.http.get(`configs/config.json?t=${new Date().getTime()}`).subscribe(...);

new Date().getTime() will create a unique number for every millisecond.

In case of ngx-translate, you can define your httpLoader factory as

export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient, '/assets/i18n/',`.json?v=${new Date().getTime()}`);
}

I hope that helps.