I am using transloco library, and to load the translation files, I am using this function.
getTranslation(langAndScope: string) {
return this.http.get<Translation>(`/assets/localization/transloco/${langAndScope}.json`);
}
But this causes the browser to cache the translation files. What are people using to combat this issue? In the worst case scenario, I thought the transloco folder could be automatically versioned in the build process, if it's content is changed or with build hash (using webpack.ExtendedAPIPlugin()). But I think you can't really just add a plugin to webpack.config on angular easily.
I don't want to use this hack
getTranslation(langAndScope: string) {
return this.http.get<Translation>(`/assets/localization/transloco/${langAndScope}.json?nocache=${new Date()}`);
}
Apparently you can just import the json file as if it is a typescript or javascript file, and webpack turns it into a js file in the build process.
getTranslation(lang: string) {
return import(`../assets/i18n/${lang}.json`).then(res => res.default);
}