Přejít na obsah
Angular i18n

Řešení Angular i18n

Podpora standalone komponent, signals a SSR pro Angular aplikace.

Setup

Překlady za běhu v Angularu ve třech krocích

Vestavěné i18n v Angularu kompiluje jeden balíček na jazyk. Pokud se mají překlady měnit bez nového buildu, ngx-translate je čte z Better I18N za běhu.

Nainstalujte závislosti loaderu

ngx-translate poskytuje pipe, službu a kontrakt loaderu; core stahuje zprávy a ukládá je do cache.

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.

Napište TranslateLoader postavený na CDN

TranslateLoader očekává Observable pro každý jazyk, takže from() z rxjs okolo getMessages je celý adapté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 }

Zaregistrujte ho a přepínejte za běhu

Jeden provider v bootstrapApplication a potom use() změní jazyk bez znovunahrání stránky a bez buildu na každý jazyk.

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

Odkud se bere text v Angularu

Žádný balíček na jazyk: loader určí jazyk za běhu a edge ho vrátí.

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

Rychlý start

Přidejte i18n do své Angular aplikace pomocí pipek a služeb.

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

Pipe translate i služba čtou z loaderu, takže žádná komponenta o CDN nic neví.

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

Funkce

Podpora standalone komponent
Podpora Signals
Překladové pipe
Direktivy i18n
Injektovatelné služby
Moduly s lazy loadingem
Angular Universal SSR
Podpora AOT kompilace
Integrace s Angular CLI
Works with

Funguje s populárními i18n knihovnami pro Angular

Better I18N doplňuje vaši i18n knihovnu pro Angular — spravujte překlady vizuálně, spolupracujte s překladateli a nasazujte přes CDN.

Better I18N + @ngx-translate/core

Nejpoužívanější překladová knihovna pro Angular. Runtime překlady pomocí pipes, direktiv a service injection.Better I18N exportuje do JSON formátu ngx-translate. Upravujte překlady v dashboardu, automaticky synchronizujte s repozitářem.

Better I18N + Angular i18n (built-in)

Oficiální i18n systém Angularu s AOT kompilací, ICU výrazy a extrakcí překladů při buildu.Export do formátu Angular XLIFF. Better I18N řídí překladový workflow, Angular CLI sestaví balíčky pro jednotlivé locale.

Better I18N + Transloco

Moderní, lehká i18n knihovna pro Angular s lazy loading, bohatými pluginy a vynikající podporou TypeScriptu.Synchronizujte překlady do JSON formátu Transloco přes GitHub integraci Better I18N. Aktualizace v reálném čase s CDN distribucí.

Prohlédněte si další průvodce po frameworku

Get started

Začněte stavět s Angular i18n

K dispozici je bezplatná verze. Kreditní karta není vyžadována.