Transloco: Cache busting translations

[hc-codersatlas]

Hi, what's the best way to deal with translation files being cached and updated? As per instructions the i18n files are going into assets folder, i.e. not hashed. Service Worker and/or other use cases hold a long cache on the flattened? json. Any change to the contents and it's not reflected even after a hard refresh/reload, esp. on mobile where it'd be hard to manually clear the data.

[itayod]

Hi @hc-codersatlas,

Generally, for questions we have a gitter channel.

For caching there are 2 possible solutions:

1. you could create a custom loader and add a query param with some hash value (e.g with a timestamp ) to the name of the file:

@Injectable({ providedIn: 'root' })
export class HttpLoader implements TranslocoLoader {
  constructor(private http: HttpClient) {}

  getTranslation(langPath: string) {
    return this.http.get<Translation>(`/assets/i18n/${langPath}.json?v=${Date.now()}`);
  }
}

1. you can create radom hash for the translation files/folder on build time.

[hc-codersatlas]

Thanks for the reply and info. I think this would be good in the documentation or similar, hence the issue. Angular cli handles the rest already.

[wwsno]

Is there a reason to not let Webpack handle the lazy loading and cache busting using import for translations that are bundled with the client?

import { Translation, TRANSLOCO_LOADER, TranslocoLoader } from '@ngneat/transloco';
import { Injectable } from '@angular/core';
import { Observable, from } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ImportLoader implements TranslocoLoader {
    getTranslation(langPath: string): Observable<Translation> {
        return from(import(`../assets/i18n/${langPath}.json`));
    }
}

export const translocoLoader = { provide: TRANSLOCO_LOADER, useClass: ImportLoader };