Force the browser to update translations files after deployment


We have an app built on Angular/Ionic. For the translations, we use ngx-translate/core package. Everything is deployed on Firebase hosting.

When we do a new build and deployment, Angular automatically generates a hash for js file names, and if it’s changed, the browser understands that it needs to pull the latest version.

How we can do the same behavior for the .json file with translations?
The issue is that users do not receive the latest version of the translations after deployment


In your app.module.ts change your Module declaration to:

          loader: {
            provide: TranslateLoader,
            useFactory: (http: HttpClient) =>
              new TranslateHttpLoader(http, './assets/i18n/', `.json?v=${new Date().getTime()}`),
            deps: [HttpClient],

That way each request sends a different request with a not needed queryParam, which will refetch the newest translation files.

Answered By – turtle

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published