ngx-translate-cache

Based on and extension of ngx-translate. This is basically a simplified version of localize-router. If you are already using localize-router you don't need this extension. This extension is aimed only to facilitate language cache with ngx-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 |

Installation

To install this library, run:

$ npm install ngx-translate-cache --save

Usage

    import { TranslateModule, TranslateService } from '@ngx-translate/core';
    import { TranslateCacheModule, TranslateCacheSettings, TranslateCacheService } from 'ngx-translate-cache';

    @NgModule({
        imports: [
            TranslateModule.forRoot(),
            TranslateCacheModule.forRoot({
              cacheService: {
                provide: TranslateCacheService,
                useFactory: (translateService, translateCacheSettings) => {
                    return new TranslateCacheService(translateService, translateCacheSettings)
                },
                deps: [ TranslateService, TranslateCacheSettings ]
              }
            })
        ],
        ...
    })
    export class AppModule {}

AoT

If you are using AoT AoT compilation or Ionic, you must use an exported function instead of an inline function.

    import { TranslateModule, TranslateService } from '@ngx-translate/core';
    import { TranslateCacheModule, TranslateCacheSettings, TranslateCacheService } from 'ngx-translate-cache';

    export function TranslateCacheFactory(translateService, translateCacheSettings) {
      return new TranslateCacheService(translateService, translateCacheSettings);
    }

    @NgModule({
        imports: [
            TranslateModule.forRoot(),
            TranslateCacheModule.forRoot({
              cacheService: {
                provide: TranslateCacheService,
                useFactory: TranslateCacheFactory,
                deps: [ TranslateService, TranslateCacheSettings ]
              }
            })
        ],
        ...
    })
    export class AppModule {}

Initializing

To initialize ngx-translate you usually do

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

    @Component({
        selector: 'app',
        template: `
            <div>{{ 'HELLO' | translate }}</div>
        `
    })
    export class AppComponent {

        constructor(translateService: TranslateService) {
            translateService.setDefaultLang('en');
            translateService.use('en');
        }
    }

To initialize ngx-translate with ngx-translate-cache

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

    @Component({
        selector: 'app',
        template: `
            <div>{{ 'HELLO' | translate }}</div>
        `
    })
    export class AppComponent {

        constructor(translateService: TranslateService,
                    translateCacheService: TranslateCacheService) {
            translateService.setDefaultLang('en');
            translateCacheService.init();
        }
    }

init method will subscribe to translateService.onLangChange event and update the cached language accordingly.

It also instruct ngx-translate to use the previous cached language if defined, or the browser current language if defined.

The order of precedence is as described below:

1. Cached language.
2. Current language of the browser.
3. Default language (language used as a fallback for *ngx-translate*).

You can also define the cache mechanism used (LocalStorage or Cookie), key used to store cached value and cookie duration (defined in hours).

    import { TranslateModule, TranslateService } from '@ngx-translate/core';
    import { TranslateCacheModule, TranslateCacheSettings, TranslateCacheService } from 'ngx-translate-cache';

    @NgModule({
        imports: [
            TranslateModule.forRoot(),
            TranslateCacheModule.forRoot({
              cacheService: {
                provide: TranslateCacheService,
                useFactory: (translateService, translateCacheSettings) => {
                    return new TranslateCacheService(translateService, translateCacheSettings)
                },
                deps: [ TranslateService, TranslateCacheSettings ]
              },
              cacheName: 'mylang', // default value is 'lang'.
              cacheMechanism: 'Cookie', // default value is 'LocalStorage'.
              cookieExpiry: 1, // default value is 720, a month. Set to a negative value and the cookie becomes a session cookie.
              cookieAttributes: 'SameSite=Strict; Secure' // no default, optional specification of additional attributes.
            })
        ],
        ...
    })
    export class AppModule {}

License

MIT © Jaime