angularangular15transloco

What is the best practice for versioning translation json files so its doesnt get cached


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()}`);
}

Solution

  • 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.

    Thank you Netanel Basal

    getTranslation(lang: string) {
        return import(`../assets/i18n/${lang}.json`).then(res => res.default);
    }