İçeriğe git
Angular i18n

Angular i18n Çözümü

Angular uygulamaları için standalone components, signals ve SSR desteği.

Setup

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.

terminalbash
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.

src/app/better-i18n.loader.tsts
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.

src/main.tsts
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

Your Angular app

The translate pipe reads what TranslateService already loaded.

0 network calls per render

@better-i18n/core

getMessages(lang) inside the TranslateLoader — cached per language.

60s TTL · 0 deps

CDN edge

Cloudflare worker answers from the nearest edge cache.

max-age=60 · always 200

R2 object store

The published translation files the sync worker wrote.

source of truth

Fallback chain — tried in order when a hop fails

1In-memory TTL cache
2CDN fetch, with timeout and one retry
3Persistent storage, if configured
4staticData bundled with the app
5Throw — after everything above missed

Write path — dashboard to app

AI or translator

Proposal reviewed in the dashboard, glossary enforced.

MCP · dashboard · CLI

Publish

Sync worker writes the locale files to R2.

better-i18n publish

CDN purge

Fire-and-forget purge of the affected keys and the manifest.

non-critical by design

Live in the app

The next getMessages() past the TTL returns the new copy.

~60s worst case

0dependencies in core
60scache TTL, client and edge
200CDN status, even on failure
5fallback layers before an error
Switching locale

Hızlı Başlangıç

Pipe ve servislerle Angular uygulamanıza i18n ekleyin.

src/app/locale-switcher.component.tsts
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

In a template

translate pipe'ı da servis de loader'dan okur; bu yüzden bileşenlerinizin hiçbiri CDN'i bilmez.

src/app/app.component.htmlhtml
<!-- 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 />
Capabilities

Özellikler

Standalone components desteği
Signals desteği
Çeviri pipe'ları
i18n directive'leri
Injectable servisler
Lazy loading modüller
Angular Universal SSR
AOT derleme desteği
Angular CLI entegrasyonu
Works with

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.

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.