Transloco + Locize
Modern Angular internationalization (now @jsverse/transloco) — paired with Locize for cloud translation management, AI translation, and CDN delivery.
Transloco is a modern Angular internationalization library focused on developer ergonomics, lazy-loaded scoped translations, and clean reactive APIs. It is published under the @jsverse/transloco npm scope as of v7+; the previous @ngneat/transloco package no longer receives updates after the org rename. Current version: v8.x. Documentation: jsverse.gitbook.io/transloco.
Locize integration uses a custom TranslocoLoader that fetches translation JSON from the Locize CDN API endpoint at runtime, plus a custom TranslocoMissingHandler that pushes newly-encountered keys back to Locize via the locizer client during development. The example repo at locize/transloco-example shows the complete setup.
- Library: @jsverse/transloco (renamed from @ngneat/transloco in v7)
- Current version: v8.x
- Angular compatibility: Modern Angular (NgModule + standalone components, Signals-friendly)
- Format: JSON (key/value); ICU support via @jsverse/transloco-messageformat
- Example repo: transloco-example
- Best for: Angular apps that want a modern, lazy-loading-first i18n library with strong TypeScript ergonomics
How Transloco works in your code
The transloco pipe in templates is the most common usage. Programmatically switch the active language via TranslocoService.setActiveLang(lang).
<!-- in your Angular template -->
<h1>{{ 'app.title' | transloco }}</h1>
<p>{{ 'app.welcome' | transloco:{ name: userName } }}</p>// in your component (using inject() — Angular 17+)
import { inject } from '@angular/core'
import { TranslocoService } from '@jsverse/transloco'
private transloco = inject(TranslocoService)
this.transloco.setActiveLang('de')Connecting Transloco to Locize
Implement a custom TranslocoLoader that fetches from the Locize CDN, plus a TranslocoMissingHandler that pushes new keys back to Locize via locizer (development only).
// src/app/app.module.ts (or standalone providers in Angular 17+)
import { Injectable } from '@angular/core'
import { HttpClient, HttpClientModule } from '@angular/common/http'
import {
Translation,
TRANSLOCO_LOADER,
TranslocoLoader,
TRANSLOCO_CONFIG,
TranslocoConfig,
TranslocoModule,
TranslocoMissingHandler,
TRANSLOCO_MISSING_HANDLER
} from '@jsverse/transloco'
import locizer from 'locizer'
import { environment } from '../environments/environment'
locizer.init({
projectId: environment.locizeProjectId,
apiKey: !environment.production && environment.locizeApiKey,
version: environment.locizeVersion
})
@Injectable({ providedIn: 'root' })
export class TranslocoCustomMissingHandler implements TranslocoMissingHandler {
handle (key: string, config: TranslocoConfig) {
if (config['activeLang'] === config.defaultLang) {
locizer.add(environment.locizeNamespace, key)
}
return key
}
}
@Injectable({ providedIn: 'root' })
export class TranslocoHttpLoader implements TranslocoLoader {
constructor (private http: HttpClient) {}
getTranslation (lang: string) {
return this.http.get<Translation>(
`https://api.locize.app/${environment.locizeProjectId}/${environment.locizeVersion}/${lang}/${environment.locizeNamespace}`
)
}
}
@NgModule({
imports: [HttpClientModule, TranslocoModule],
providers: [
{ provide: TRANSLOCO_MISSING_HANDLER, useClass: TranslocoCustomMissingHandler },
{ provide: TRANSLOCO_LOADER, useClass: TranslocoHttpLoader },
{
provide: TRANSLOCO_CONFIG,
useValue: {
availableLangs: ['en', 'de'],
reRenderOnLangChange: true,
fallbackLang: 'de',
defaultLang: 'en'
} as TranslocoConfig
}
]
})
export class AppModule {}The Locize CDN URL pattern is https://api.locize.app/[projectId]/[version]/[language]/[namespace]. The TranslocoLoader's getTranslation(lang) builds the URL per active language. The TranslocoMissingHandler restricts pushing to the default language so you don't accidentally push translations as missing keys.
Translation updates from Locize flow to your running app on the next fetch — the same continuous localization model i18next users get, with Transloco as the runtime layer. Full working example at locize/transloco-example (note: the example uses the older @ngneat/transloco package; the integration pattern is identical with the current @jsverse/transloco — only the import paths change).
Frequently asked questions
Transloco is a modern Angular internationalization library that emphasizes developer ergonomics, lazy-loaded scoped translations, and a clean integration with the Angular ecosystem. It is published under the @jsverse/transloco npm scope as of v7+ (previously published as @ngneat/transloco — that package is no longer receiving updates and should be migrated). Current version is v8.x; the documentation lives at jsverse.gitbook.io/transloco.
Yes. As part of v7 the package scope was renamed from @ngneat/transloco to @jsverse/transloco due to a reorganization at ngneat. All new features, plugins, and version updates ship under the @jsverse scope. The old @ngneat/transloco package will no longer receive updates — existing projects should migrate when convenient. The migration is mostly an import-path change.
Yes. Integration uses a custom TranslocoLoader that fetches translation JSON from the Locize CDN API endpoint at runtime. Optionally, locizer can be wired into a TranslocoMissingHandler so newly-encountered keys in development push back to Locize automatically — mirroring i18next saveMissing. The example repo at github.com/locize/transloco-example shows the complete setup (using the older @ngneat/transloco package; the same pattern applies to the current @jsverse/transloco).
Three pieces: (1) implement a TranslocoLoader whose `getTranslation(lang)` calls `HttpClient.get` on the Locize CDN URL pattern `https://api.locize.app/[projectId]/[version]/[lang]/[namespace]`; (2) implement a TranslocoMissingHandler that calls `locizer.add(namespace, key)` for missing keys (only in dev, only for the reference language); (3) register both via providers in your AppModule (or standalone providers in Angular 17+ setups). Translations now load from Locize at runtime and missing keys flow back automatically.
ngx-translate is older, more widely-installed, and has a simpler API with a large ecosystem of community loaders. Transloco is newer, more opinionated, and ships with first-class lazy-loaded scoped translations, a clean reactive API, and stronger TypeScript support. Both work well with Locize via the same TranslateLoader / TranslocoLoader pattern. The choice is mostly preference — Transloco for new projects that want a modern Angular-idiomatic API; ngx-translate when you need maximum ecosystem support or are migrating an existing project.
Yes. Transloco v7+ supports both NgModule-based and standalone-component-based Angular applications, and the API integrates well with modern Angular Signals-based reactivity. See the @jsverse/transloco documentation for the recommended standalone setup pattern.