Persist Translations

The @jsverse/transloco-persist-translations plugin provides functionality to cache translations in specified storage. This ensures translations are stored locally and reduces the need for repeated network requests.


Installation

pnpm add @jsverse/transloco-persist-translations

Usage

To enable persistent translations, provide the necessary configuration in your application's Transloco module or config file. Specify the loader and the storage you want to use.

LocalStorage Example

To enable the plugin, include the following provider in your app providers:

import { provideTranslocoPersistTranslations } from '@jsverse/transloco-persist-translations ';

bootstrapApplication(AppComponent, {
  providers: [
    provideTranslocoPersistTranslations({
      loader: TranslocoHttpLoader, // Auto-generated via ng add
      storage: { useValue: localStorage },
    }),
  ],
});

Ensure you do not include the default loader when using this plugin.

Async Storage (IndexedDB) Example

You can use asynchronous storage like IndexedDB with the help of libraries such as localForage:

import { provideTranslocoPersistTranslations } from '@jsverse/transloco-persist-translations ';
import * as localForage from 'localforage';

localForage.config({
  driver: localForage.INDEXEDDB,
  name: 'Transloco',
  storeName: 'translations',
});

bootstrapApplication(AppComponent, {
  providers: [
   provideTranslocoPersistTranslations({
      loader: TranslocoHttpLoader, // Auto-generated via ng add
      storage: { useValue: localForage },
    }),
  ],
});

Configuration Options

The provideTranslocoPersistTranslations method supports the following configuration options:

Option
Type
Description

ttl

number

Time-to-live for the cache (in seconds).

storageKey

string

Key to store translation data.

Example:

provideTranslocoPersistTranslations({
  loader: TranslocoHttpLoader,
  storage: { useValue: localStorage },
  ttl: 86_400, // Cache duration in seconds (1 day)
  storageKey: 'custom-translations-key',
});

Clearing the Cache

The cache is automatically cleared when the ttl expires. However, you can manually clear it using the clearCache method:

app.component.ts
import { TranslocoPersistTranslations } from '@jsverse/transloco-persist-translations';

export class AppComponent {
  #translationsCache = inject(TranslocoPersistTranslations);

  clearTranslationsCache() {
    this.#translationsCache.clearCache();
  }
}

With this plugin, you can optimize your app's translation loading process, reduce network requests, and provide a seamless multilingual experience for your users.

Last updated

Was this helpful?