ngx-translate + Locize
The most-used Angular internationalization library — paired with Locize for cloud translation management, AI translation, and CDN delivery.
ngx-translate is the most-installed Angular internationalization library. It provides the translate pipe, the TranslateDirective, the TranslateService for programmatic access, and a pluggable TranslateLoader for fetching translation files. As of late 2025 the current published version is v17.0.0 on npm, with v18 in development (Angular Signals support, fully standalone API, removal of TranslateModule).
Locize integration with ngx-translate uses the standard TranslateHttpLoader pattern — point it at the Locize CDN API endpoint and translation JSON loads at runtime, on every locale switch, without redeploying. Optionally wire in the locizer client as a MissingTranslationHandler to push newly-encountered keys back to Locize during development, mirroring i18next's saveMissing flow.
- Library: @ngx-translate/core + @ngx-translate/http-loader
- Current version: v17.0.0 (v18 in development)
- Angular compatibility: Supports Angular 14 through 19+; v17 supports both NgModule and standalone components
- Format: JSON (key/value); ICU support via the ngx-translate-messageformat-compiler add-on
- Example repo: ngx-translate-example
- Best for: Angular apps that want a mature, well-supported i18n library with the largest ecosystem
How ngx-translate works in your code
The translate pipe in templates is the most common usage. Programmatically, switch the active language via TranslateService.use(lang).
<!-- in your Angular template -->
<h1>{{ 'app.title' | translate }}</h1>
<p>{{ 'app.welcome' | translate:{ name: userName } }}</p>// in your component
import { TranslateService } from '@ngx-translate/core'
constructor (private translate: TranslateService) {
this.translate.setDefaultLang('en')
this.translate.use('de')
}Connecting ngx-translate to Locize
Configure the TranslateHttpLoader to fetch from the Locize CDN, optionally add a MissingTranslationHandler that pushes new keys back to Locize via locizer.
// src/app/app.module.ts
import { HttpClient, HttpClientModule } from '@angular/common/http'
import {
TranslateModule,
TranslateLoader,
MissingTranslationHandler,
MissingTranslationHandlerParams
} from '@ngx-translate/core'
import { TranslateHttpLoader } from '@ngx-translate/http-loader'
import locizer from 'locizer'
import { environment } from '../environments/environment'
// Initialize locizer to push missing keys back to Locize in dev.
locizer.init({
projectId: environment.locizeProjectId,
apiKey: !environment.production && environment.locizeApiKey,
version: environment.locizeVersion
})
export class MyMissingTranslationHandler implements MissingTranslationHandler {
handle (params: MissingTranslationHandlerParams) {
locizer.add(environment.locizeNamespace, params.key)
return params.key
}
}
// TranslateHttpLoader pointed at the Locize CDN
export function HttpLoaderFactory (http: HttpClient) {
return new TranslateHttpLoader(
http,
`https://api.locize.app/${environment.locizeProjectId}/${environment.locizeVersion}/`,
`/${environment.locizeNamespace}`
)
}
@NgModule({
imports: [
HttpClientModule,
TranslateModule.forRoot({
missingTranslationHandler: {
provide: MissingTranslationHandler,
useClass: MyMissingTranslationHandler
},
useDefaultLang: true,
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
]
})
export class AppModule {}The Locize CDN URL pattern is https://api.locize.app/[projectId]/[version]/[language]/[namespace]. The TranslateHttpLoader appends the active language between the prefix and suffix arguments to produce that final URL.
For Angular 17+ standalone-component setups, replace TranslateModule.forRoot(...) with the equivalent provideTranslateService(...)-style providers (see the ngx-translate v17 migration guide). The Locize-side wiring (TranslateHttpLoader factory + MissingTranslationHandler) stays the same. Full working example at locize/ngx-translate-example.
Frequently asked questions
ngx-translate is the most-used internationalization library for Angular. It provides the TranslateModule (or providers for standalone components in Angular 17+), the `translate` pipe, the `TranslateDirective`, and the `TranslateService` for programmatic access. Translation files are loaded via a TranslateLoader — typically the TranslateHttpLoader for fetching JSON from an HTTP endpoint. As of late 2025 the current published version is v17.0.0 on npm; v18 is in development and introduces Angular Signals support and a fully standalone API.
Yes. The integration uses ngx-translate's TranslateHttpLoader pointed directly at the Locize CDN API endpoint, so Angular fetches translation JSON from your Locize project at runtime. Optionally, locizer can be wired into a custom MissingTranslationHandler so that newly-encountered keys in development get pushed back to Locize automatically — mirroring i18next's saveMissing flow. The example repo at github.com/locize/ngx-translate-example shows the complete setup.
Three pieces: (1) configure the TranslateHttpLoader factory to use the Locize CDN URL pattern `https://api.locize.app/[projectId]/[version]/` as the prefix; (2) optionally initialize locizer with your project credentials and create a custom MissingTranslationHandler that calls `locizer.add(namespace, key)` to push new keys to Locize during development; (3) provide both via TranslateModule.forRoot in your AppModule (or via providers in Angular 17+ standalone setup). The example repo shows the canonical wiring.
Yes. ngx-translate v17 supports both NgModule and standalone-component-based Angular applications. The migration guide on ngx-translate.org covers the v16 → v17 path. v18 (in development) is designed standalone-first and removes TranslateModule in favour of providers — it also adds Signal-based language switching via reactive currentLang and getValue() that traverses nested keys correctly.
ngx-translate is older and more widely-installed, with a simpler API and a large ecosystem of community loaders. Transloco (now @jsverse/transloco after the rename from @ngneat) is newer, more developer-ergonomic, and supports lazy-loading scoped translations natively. Both work well with Locize via the same TranslateHttpLoader-style pattern (fetch translations from the Locize CDN, push missing keys via locizer). The choice is mostly preference — there is no strong reason to migrate an existing ngx-translate app to Transloco purely for Locize compatibility.
Yes. From ngx-translate's point of view, it fetches translation JSON from an HTTP endpoint — and the Locize CDN URL serves exactly that. Whatever you do inside Locize (AI translation, review workflow, branches, versioning, in-context editing, audit log) lives behind the CDN and flows to your Angular app on the next fetch. Translation updates do not require a rebuild of your Angular app — same continuous localization model i18next users get.