Řešení Angular i18n
Podpora standalone komponent, signals a SSR pro Angular aplikace.
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.
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.
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.
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
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
Rychlý start
Přidejte i18n do své Angular aplikace pomocí pipek a služeb.
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
Pipe translate i služba čtou z loaderu, takže žádná komponenta o CDN nic neví.
<!-- 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 />Funkce
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í.
Související
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.