angular-translate-cache

Based on and extended from angular-translate.
Forked from the original repository to introduce improvements by Behram Bazo.

This is a simplified version of localize-router.
If you’re already using localize-router, this extension is likely unnecessary.
The primary purpose of this extension is to facilitate language caching with angular-translate.

| Angular version | Integration branch | Library version | |:---------------:|:------------------:|:---------------:| | 8 and below | angular1-8 | ^0.0.0 | | 9 | angular9 | ^9.0.0 | | 10 | angular10 | ^10.0.0 | | 11 | angular11 | ^11.0.0 | | 12 | angular12 | ^12.0.0 | | 13 | angular13 | ^13.0.0 | | 14 | angular14 | ^14.0.0 | | 15 | angular15 | ^15.0.0 | | 16 | angular16 | ^16.0.0 | | 17 | angular17 | ^17.0.0 | | 18 | angular18 | ^18.0.0 |

Installation

To install this library, run:

$ npm install angular-translate-cache --save

Usage (Standalone Setup)

Angular now supports the standalone components model, enabling more modular design. Here’s how to set up angular-translate-cache using standalone components with Angular's new build system.

import { importProvidersFrom } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { TranslateModule, TranslateService } from '@angular-translate/core';
import { TranslateCacheModule, TranslateCacheSettings, TranslateCacheService } from 'angular-translate-cache';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(
      TranslateModule.forRoot(),
      TranslateCacheModule.forRoot({
        cacheService: {
          provide: TranslateCacheService,
          useFactory: (translateService: TranslateService, translateCacheSettings: TranslateCacheSettings) => {
            return new TranslateCacheService(translateService, translateCacheSettings);
          },
          deps: [TranslateService, TranslateCacheSettings],
        },
      })
    ),
  ],
});

Initializing

For standalone components, initialize the translation and caching services within the component itself:

import { Component } from '@angular/core';
import { TranslateService } from '@angular-translate/core';
import { TranslateCacheService } from 'angular-translate-cache';

@Component({
  selector: 'app-root',
  template: `<div>{{ 'HELLO' | translate }}</div>`,
  standalone: true,
  imports: [TranslateService, TranslateCacheService]
})
export class AppComponent {
  constructor(private translateService: TranslateService, private translateCacheService: TranslateCacheService) {
    this.translateService.setDefaultLang('en');
    this.translateCacheService.init();
  }
}

This setup uses the init method of TranslateCacheService to cache the selected language, falling back to the browser’s current language or a default.

Cache Configuration Options

You can customize cache settings by defining options within the TranslateCacheModule.forRoot method:

TranslateCacheModule.forRoot({
  cacheService: {
    provide: TranslateCacheService,
    useFactory: (translateService, translateCacheSettings) => {
      return new TranslateCacheService(translateService, translateCacheSettings);
    },
    deps: [TranslateService, TranslateCacheSettings],
  },
  cacheName: 'mylang',          // Default is 'lang'.
  cacheMechanism: 'Cookie',      // Default is 'LocalStorage'.
  cookieExpiry: 1,               // Default is 720 hours (1 month).
  cookieAttributes: 'SameSite=Strict; Secure' // Additional cookie attributes.
});

License

MIT © Behram Bazo