feat(ngx-i18n): add the option to cache bust the translation files using the root config (#415)

Co-authored-by: Wouter Heirstrate <[email protected]>

Author: WHeirstrate

apps/i18n-test/src/main.ts

@@ -11,6 +11,7 @@ bootstrapApplication(AppComponent, {
 		importNgxI18nProviders({
 			defaultLanguage: 'nl',
 			defaultAssetPaths: ['./assets/shared/'],
+			cacheBust: '1.0.0',
 		}),
 		provideHttpClient(withInterceptorsFromDi()),
 	],

libs/angular/i18n/src/lib/i18n.types.ts

@@ -3,4 +3,18 @@ export interface NgxI18nConfiguration {
 	availableLanguages?: string[];
 	defaultAssetPaths: string[];
 	languageRouteParam?: string;
+	/**
+	 * The cache busting parameter to append to the translation file requests.
+	 * This can be useful when you want to force the browser to fetch the latest
+	 * version of the translation files by appending this value to the `v` query
+	 * parameter.
+	 *
+	 * When not provided, no query parameter will be added to the request.
+	 *
+	 * @example
+	 * `?v=1` when `cacheBust: '' + 1`
+	 * `?v=1.0.0` when `cacheBust: '1.0.0'`
+	 * `?v=1743428073628` when `cacheBust: String(Date.now())`
+	 */
+	cacheBust?: string;
 }

libs/angular/i18n/src/lib/loader/multi-translation/multi-translation.loader.ts

@@ -6,11 +6,18 @@ import { forkJoin, Observable, of } from 'rxjs';
 import { catchError, map, tap } from 'rxjs/operators';
 
 import { NgxI18nLoadingService } from '../../services';
+import { NgxI18nConfiguration } from '../../i18n.types';
+import { NgxI18nConfigurationToken } from '../../tokens';
 
 export class NgxI18nMultiTranslationHttpLoader implements TranslateLoader {
 	private readonly translationLoadingService: NgxI18nLoadingService =
 		inject(NgxI18nLoadingService);
 
+	/**
+	 * The configuration for the NgxI18nModule.
+	 */
+	private readonly config: NgxI18nConfiguration = inject(NgxI18nConfigurationToken);
+
 	constructor(
 		private readonly httpBackend: HttpBackend,
 		private readonly translationsPaths: string[]
@@ -37,7 +44,9 @@ export class NgxI18nMultiTranslationHttpLoader implements TranslateLoader {
 				});
 			} else {
 				// Iben: If the translations aren't available in the store, we fetch them from the server
-				const fetchPath = `${path}${lang}.json`;
+				// Wouter: When provided, add a cache busting param so that each request is fetched from the server instead of the browser cache
+				const fetchPath = `${path}${lang}.json${this.config.cacheBust ? '?v=' + this.config.cacheBust : ''}`;
+
 				return new HttpClient(this.httpBackend).get(fetchPath).pipe(
 					// Iben: Map this to an object so we can track which results corresponds with which path
 					map((translations) => {