Solución de i18n para Angular
Compatibilidad con componentes standalone, signals y SSR para aplicaciones Angular.
Traducciones en tiempo de ejecución en Angular, en tres pasos
El i18n integrado de Angular compila un bundle por idioma. Para traducciones que cambian sin volver a compilar, ngx-translate las lee de Better I18N en tiempo de ejecución.
Instale las dependencias del loader
ngx-translate aporta el pipe, el servicio y el contrato del loader; core descarga y guarda en caché los mensajes.
npm install @ngx-translate/core @better-i18n/core
# @better-i18n/core ships zero dependencies —
# it is the same client our React SDKs are built on.Escriba un TranslateLoader respaldado por el CDN
TranslateLoader pide un Observable por idioma, así que envolver getMessages con from() de rxjs es todo el adaptador.
import { Injectable } from '@angular/core'
import { TranslateLoader } from '@ngx-translate/core'
import { createI18nCore } from '@better-i18n/core'
import { from, Observable } from 'rxjs'
// Module scope: the 60s in-memory cache lives on the instance, so one
// client per app — not one per component.
const betterI18n = createI18nCore({
projectId: 'your-org/your-project', // Settings → General → Project ID
defaultLocale: 'en',
})
@Injectable({ providedIn: 'root' })
export class BetterI18nLoader implements TranslateLoader {
// TranslateLoader's contract: one Observable of messages per language.
getTranslation(lang: string): Observable<Record<string, unknown>> {
return from(betterI18n.getMessages(lang))
}
}
export { betterI18n }Regístrelo y cambie de idioma en tiempo de ejecución
Un proveedor en bootstrapApplication y luego use() cambia de idioma sin recargar la página y sin una build por idioma.
import { bootstrapApplication } from '@angular/platform-browser'
import { importProvidersFrom } from '@angular/core'
import { TranslateModule, TranslateLoader } from '@ngx-translate/core'
import { AppComponent } from './app/app.component'
import { BetterI18nLoader } from './app/better-i18n.loader'
bootstrapApplication(AppComponent, {
providers: [
importProvidersFrom(
TranslateModule.forRoot({
defaultLanguage: 'en',
loader: { provide: TranslateLoader, useClass: BetterI18nLoader },
})
),
],
})How it works
De dónde viene un texto en Angular
Sin un bundle por idioma: el loader resuelve el idioma en tiempo de ejecución y el edge lo responde.
Read path — every locale load
The translate pipe reads what TranslateService already loaded.
0 network calls per render
getMessages(lang) inside the TranslateLoader — cached per language.
60s TTL · 0 deps
Cloudflare worker answers from the nearest edge cache.
max-age=60 · always 200
The published translation files the sync worker wrote.
source of truth
Fallback chain — tried in order when a hop fails
Write path — dashboard to app
Proposal reviewed in the dashboard, glossary enforced.
MCP · dashboard · CLI
Sync worker writes the locale files to R2.
better-i18n publish
Fire-and-forget purge of the affected keys and the manifest.
non-critical by design
The next getMessages() past the TTL returns the new copy.
~60s worst case
Inicio rápido
Agrega i18n a tu app Angular con pipes y servicios.
import { Component, inject } from '@angular/core'
import { TranslateModule, TranslateService } from '@ngx-translate/core'
import { betterI18n } from './better-i18n.loader'
@Component({
selector: 'app-locale-switcher',
standalone: true,
imports: [TranslateModule],
template: `
<select (change)="switchTo($any($event.target).value)">
<option *ngFor="let l of languages" [value]="l.code">{{ l.name }}</option>
</select>
`,
})
export class LocaleSwitcherComponent {
private translate = inject(TranslateService)
languages: { code: string; name: string }[] = []
async ngOnInit() {
// Locales come from the project manifest, not a hardcoded array.
this.languages = await betterI18n.getLanguages()
}
switchTo(lang: string) {
// use() calls the loader, which hits the cache or the CDN.
this.translate.use(lang)
}
}In a template
Tanto el pipe translate como el servicio leen del loader, así que ningún componente sabe nada del CDN.
<!-- app.component.html -->
<h1>{{ 'home.title' | translate }}</h1>
<p>{{ 'home.greeting' | translate: { name: 'World' } }}</p>
<!-- ICU plurals authored in the Better i18n dashboard -->
<p>{{ 'cart.items' | translate: { count: 3 } }}</p>
<app-locale-switcher />Características
Compatible con las bibliotecas i18n populares de Angular
Better I18N complementa tu biblioteca i18n de Angular — gestiona traducciones visualmente, colabora con traductores y despliega vía CDN.
Better I18N + @ngx-translate/core
La biblioteca de traducción Angular más utilizada. Traducciones en tiempo de ejecución con pipes, directivas e inyección de servicios.Better I18N exporta en formato JSON de ngx-translate. Edita traducciones en nuestro panel, sincroniza automáticamente con tu repositorio.
Better I18N + Angular i18n (built-in)
El sistema i18n oficial de Angular con compilación AOT, expresiones ICU y extracción de traducciones en tiempo de compilación.Exporta en formato XLIFF de Angular. Better I18N gestiona el flujo de traducción, Angular CLI construye bundles específicos por locale.
Better I18N + Transloco
Biblioteca i18n moderna y ligera para Angular con carga diferida, plugins completos y excelente soporte TypeScript.Sincroniza traducciones en formato JSON de Transloco vía la integración GitHub de Better I18N. Actualizaciones en tiempo real con entrega CDN.
Relacionado
Explore otras guías sobre marcos de trabajo
Get started
Empieza a construir con i18n para Angular
Plan gratuito disponible. No se requiere tarjeta de crédito.