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

pnpm add @jsverse/transloco-persist-translations

yarn

yarn add @jsverse/transloco-persist-translations

npm

npm install @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

Standalone

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 },
    }),
  ],
});

NgModule

To enable the plugin, include the following provider in your TranslocoRootModule:

transloco-root.module.ts

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

@NgModule({
  providers: [
    provideTranslocoPersistTranslations({
      loader: TranslocoHttpLoader, // Auto-generated via ng add
      storage: { useValue: localStorage },
    }),
  ],
})
export class TranslocoRootModule {}

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:

Standalone

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 },
    }),
  ],
});

NgModule

transloco-root.module.ts

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

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

@NgModule({
  providers: [
    provideTranslocoPersistTranslations({
      loader: TranslocoHttpLoader, // Auto-generated via ng add
      storage: { useValue: localForage },
    }),
  ],
})
export class TranslocoRootModule {}

---

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.