When working with Angular translations, they are typically loaded using a TranslateLoader that contains a getTranslation method. A common approach is to utilize a TranslateHttpLoader to retrieve translations from assets.
For example:
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json?cacheBuster=' + new Date().getTime());
}
If you need to handle translations from multiple files, you can use forkJoin requests and merge the responses into a single translation file.
I have also included an example of how to modify directory paths, even though my paths remain the same for me.
export class CustomTranslateLoader implements TranslateLoader {
constructor(private http: HttpClient, private config: { uiPath: string; libPath }
}) {
}
public getTranslation(lang: string): Observable<any> {
const uiUrl = `${this.config.uiPath}/${lang}.json`;
const libraryUrl = `${this.config.libPath}/${lang}-map.json`;
const suffix = '?cacheBuster=' + new Date().getTime();
return forkJoin({
uiTranslations: this.http.get(`${uiUrl}${suffix}`),
libTranslations: this.http.get(`${libraryUrl}${suffix}`),
}).pipe(
map(response => ({...response.libTranslations, ...response.uiTranslations}))
);
}
}
export function HttpLoaderFactory(http: HttpClient) {
return new CustomTranslateLoader(http, {
uiPath: './assets/i18n',
libPath: './assets/i18n',
});
}