Soluzione Angular i18n
Supporto per componenti standalone, signals e SSR per applicazioni Angular.
Traduzioni a runtime in Angular, in tre passaggi
L'i18n integrato di Angular compila un bundle per ogni lingua. Per traduzioni che cambiano senza una nuova build, ngx-translate le legge da Better I18N a runtime.
Installa le dipendenze del loader
ngx-translate fornisce la pipe, il servizio e il contratto del loader; core scarica i messaggi e li mette in cache.
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.Scrivi un TranslateLoader basato sul CDN
TranslateLoader richiede un Observable per lingua, quindi from() di rxjs attorno a getMessages è tutto l'adattatore.
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 }Registralo e cambia lingua a runtime
Un provider in bootstrapApplication e poi use() cambia lingua senza ricaricare la pagina e senza una build per lingua.
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
Da dove arriva una stringa in Angular
Nessun bundle per lingua: il loader risolve una lingua a runtime e l'edge la restituisce.
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
Avvio rapido
Aggiungi i18n alla tua app Angular con pipe e servizi.
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
Sia la pipe translate sia il servizio leggono dal loader, quindi nessun componente sa nulla 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 />Funzionalità
Compatibile con le librerie i18n popolari di Angular
Better I18N integra la tua libreria i18n Angular — gestisci le traduzioni visivamente, collabora con i traduttori e distribuisci via CDN.
Better I18N + @ngx-translate/core
La libreria di traduzione Angular più utilizzata. Traduzioni runtime con pipe, direttive e iniezione di servizi.Better I18N esporta nel formato JSON di ngx-translate. Modifica le traduzioni nella nostra dashboard, sincronizza automaticamente con il tuo repository.
Better I18N + Angular i18n (built-in)
Il sistema i18n ufficiale di Angular con compilazione AOT, espressioni ICU ed estrazione delle traduzioni in fase di build.Esporta nel formato XLIFF di Angular. Better I18N gestisce il flusso di traduzione, Angular CLI crea bundle specifici per ogni locale.
Better I18N + Transloco
Libreria i18n moderna e leggera per Angular con caricamento lazy, plugin completi ed eccellente supporto TypeScript.Sincronizza le traduzioni nel formato JSON di Transloco tramite l'integrazione GitHub di Better I18N. Aggiornamenti in tempo reale con distribuzione CDN.
Correlati
Scopra altre guide sui framework
Get started
Inizia a sviluppare con Angular i18n
Piano gratuito disponibile. Nessuna carta di credito richiesta.