Browser Caching is stopping us get the latest version of en.json

[chris31389]

Hi,

When we update the en.json file with new values and deploy it, some browsers continue to use a cached/previous version of en.json and do not retrieve the latest en.json file.

I've seen Angular avoid caching issues by adding a hash to the end of files generated by the Angular CLI at build time. Is this something that ngx-translate can already do?

Is there other ways to fix this problem?

Thanks,
Chris

[maciejcichowski]

Quick fix that will make ngx-translate load new json file every time you refresh page. Not efficient at all but simple and works;)
app.module.ts:

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json?v=' + Date.now());
}

@NgModule({
  imports: [
...
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),

[Abdulrahmanh995]

Append your build version as a query parameter as @maciejcichowski way, so translation files will be requested in every new version.

[chris31389]

I managed to fix this by adding a Cache-Control header with the value no-cache to the http response that contains the en.json response

[michcio1234]

For future generations:
if you have this in your nginx config (e.g. because you serve an Angular webapp with it):

        location / {
            try_files $uri$args $uri$args/ /index.html;
        }

then you must add another location block similar to this (notice no $args):

        location /assets {
            try_files $uri $uri/;
        }

Otherwise the browser will try to download a file with ?v=... in its name, which clearly doesn't exist.