Angular i18n Çözümü
Angular uygulamaları için standalone components, signals ve SSR desteği.
Angular'da üç adımda çalışma zamanı çevirileri
Angular'ın dahili i18n'i her dil için ayrı bir bundle derler. Yeniden build almadan değişen çeviriler için ngx-translate bunları çalışma zamanında Better I18N'den okur.
Loader bağımlılıklarını kurun
ngx-translate pipe'ı, servisi ve loader sözleşmesini sağlar; core mesajları indirir ve önbelleğe alır.
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.CDN'e dayanan bir TranslateLoader yazın
TranslateLoader her dil için bir Observable ister; bu yüzden getMessages çevresindeki rxjs from() adaptörün tamamıdır.
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 }Tanımlayın ve çalışma zamanında değiştirin
bootstrapApplication içinde tek bir provider, ardından use() sayfa yenilemeden ve dil başına build almadan dili değiştirir.
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
Angular'da bir metin nereden gelir
Dil başına bundle yok: loader dili çalışma zamanında çözümler, yanıtı edge verir.
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
Hızlı Başlangıç
Pipe ve servislerle Angular uygulamanıza i18n ekleyin.
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
translate pipe'ı da servis de loader'dan okur; bu yüzden bileşenlerinizin hiçbiri CDN'i bilmez.
<!-- 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 />Özellikler
Popüler Angular i18n kütüphaneleriyle çalışır
Better I18N, Angular i18n kütüphanenizi tamamlar — çevirileri görsel olarak yönetin, çevirmenlerle işbirliği yapın ve CDN üzerinden dağıtın.
Better I18N + @ngx-translate/core
En yaygın kullanılan Angular çeviri kütüphanesi. Pipe'lar, directive'ler ve service injection ile runtime çeviri.Better I18N, ngx-translate JSON formatına aktarır. Panelimizde çevirileri düzenleyin, deponuzla otomatik senkronize edin.
Better I18N + Angular i18n (built-in)
AOT derleme, ICU ifadeleri ve derleme zamanı çeviri çıkarma özellikli Angular'ın resmi i18n sistemi.Angular XLIFF formatına aktarın. Better I18N çeviri iş akışını yönetir, Angular CLI locale'e özel paketler oluşturur.
Better I18N + Transloco
Lazy loading, zengin eklentiler ve mükemmel TypeScript desteği ile Angular için modern, hafif i18n kütüphanesi.Better I18N'in GitHub entegrasyonu ile çevirileri Transloco JSON formatına senkronize edin. CDN dağıtımı ile gerçek zamanlı güncellemeler.
İlgili
Diğer Çerçeve Kılavuzlarını Keşfedin
Get started
Angular i18n ile İnşa Etmeye Başlayın
Ücretsiz plan mevcut. Kredi kartı gerekmez.