Registry / productivity / angular-translate-cache

angular-translate-cache

JSON →
library18.0.2jsnpmunverified

Angular extension to cache language translations for ngx-translate. Version 18.0.2 supports Angular 18 with standalone components. Provides localStorage or cookie-based caching for the current language, reducing API calls and improving UX. It extends @angular-translate/core, offering a cache service that persists the selected language across sessions. The library follows Angular version parity (v9-18) and is a simplified alternative to localize-router's caching feature.

npm install angular-translate-cache
INSTALL
IMPORT
SIG · ANGULAR-TRANSLATE-
A
angular-translate-cache
productivityjavascriptv18.0.2
harness data pending
Install & Compatibility
Where this runs

No compatibility data collected yet for this library.

Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

TranslateCacheModule
import { TranslateCacheModule } from 'angular-translate-cache';
import { TranslateCacheModule } from '@angular-translate/core';
This module is provided by angular-translate-cache, not the core library.
TranslateCacheService
import { TranslateCacheService } from 'angular-translate-cache';
const TranslateCacheService = require('angular-translate-cache').TranslateCacheService;
The library is ESM-only; CommonJS require may not work with some bundlers.
TranslateCacheSettings
import { TranslateCacheSettings } from 'angular-translate-cache';
import { TranslateCacheSettings } from 'angular-translate-cache/settings';
All exports are from the main package entry point.

Setup angular-translate-cache with standalone app, configure caching via forRoot, and initialize in AppComponent.

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], }, cacheName: 'lang', cacheMechanism: 'Cookie', }) ), ], }); // In AppComponent: import { Component } from '@angular/core'; import { TranslateService } from '@angular-translate/core'; import { TranslateCacheService } from 'angular-translate-cache'; @Component({ selector: 'app-root', standalone: true, template: `<div>{{ 'HELLO' | translate }}</div>`, }) export class AppComponent { constructor( private translateService: TranslateService, private translateCacheService: TranslateCacheService ) { this.translateService.setDefaultLang('en'); this.translateCacheService.init(); } }
Debug
Known issues
breakingVersions 18.x are ESM-only and require Angular 18; they do not support CommonJS or older Angular versions.
fix
Upgrade to Angular 18 and ensure your bundler supports ESM. Use import syntax instead of require.
affects: >=18.0.0
deprecatedThe library forked from angular-translate to introduce improvements, but the original repository may no longer be maintained.
fix
Consider using localize-router if you need more features, or ensure compatibility with the forked version.
affects: all
gotchaTo use with Angular's AOT compiler, you must provide the factory function for TranslateCacheService – direct instantiation in providers is not supported.
fix
Always use useFactory with deps as shown in the quickstart; do not use `useClass` or `useValue` for the cache service.
affects: all
gotchaIf you use LocalStorage as cache mechanism, the feature may not work in sandboxed environments (like some SSR or mobile webviews) where LocalStorage is disabled.
fix
Switch to Cookie cacheMechanism for better compatibility or handle errors gracefully.
affects: all
Errors
Common errors & fixes
Error: Angular JIT compilation failed: 'TranslateCacheModule' is not a function
Forgot to call .forRoot() on TranslateCacheModule.
fix
Use TranslateCacheModule.forRoot({...}) instead of TranslateCacheModule in imports.
NullInjectorError: No provider for TranslateCacheService!
TranslateCacheService not provided in root injector.
fix
Add the cacheService provider inside TranslateCacheModule.forRoot().
TypeError: Cannot read property 'init' of undefined
TranslateCacheService instance not available in component.
fix
Ensure TranslateCacheService is provided via Angular DI (e.g., in AppComponent constructor).
Upgrade
Version history
18.0.2latest on npm
Audit
Dependencies
@angular-translate/corerequiredPeer dependency: required to use TranslateService and TranslateModule.
@angular/corerequiredPeer dependency: Angular framework.
Agent activity
35 hits · last 30 days
node
30
OpenAI (training)
1
Resources
angular-translate-cache — npm install angular-translate-cache · libregistry