Persist Translations

This plugin provides the functionality of persisting translations to the provided storage.

Installation

npm install @jsverse/transloco-persist-translations

Usage

Add persist translation providers using the into the TranslocoRootModule/app.config.ts, and provide the storage you would like to use:

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 {}

Note that you should not include the default loader to make it work.

You can also use an async storage. For example, let's install localForage and use IndexedDB:

transloco-root.module.ts

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

import { TranslocoHttpLoader } from './transloco-loader';

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

provideTranslocoPersistTranslations can also receive the following configuration:

{
  "ttl": 86400,
  "storageKey": "yourKey"
}

• ttl: How long the cache should live in seconds.
• storageKey: The key to be used to save the translations data.

Clear Storage

The storage cleanup is done automatically once the ttl is passed, but it could also can be done manually by calling clearCache method from the cache service:

app.component.ts

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

export class AppComponent {
  constructor(private loader: TranslocoPersistTranslations) {}

  clearTranslationsCache() {
    this.loader.clearCache();
  }
}