Angular i18n-oplossing
Standalone componenten, signals en SSR-ondersteuning voor Angular-applicaties.
Runtime-vertalingen in Angular, in drie stappen
De ingebouwde i18n van Angular compileert één bundel per taal. Voor vertalingen die wijzigen zonder nieuwe build leest ngx-translate ze op runtime uit Better I18N.
De loader-afhankelijkheden installeren
ngx-translate levert de pipe, de service en het loader-contract; core haalt de berichten op en cachet ze.
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.Een TranslateLoader schrijven die het CDN gebruikt
TranslateLoader vraagt om een Observable per taal, dus rxjs from() om getMessages heen is de hele adapter.
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 }Registreren en wisselen op runtime
Één provider in bootstrapApplication en daarna wisselt use() van taal zonder de pagina te herladen en zonder build per taal.
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
Waar een string in Angular vandaan komt
Geen bundel per taal: de loader bepaalt de taal op runtime en de edge levert die.
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
Snel starten
Voeg i18n toe aan je Angular-app met pipes en services.
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
Zowel de translate-pipe als de service lezen uit de loader, dus geen enkele component weet iets van het 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 />Functies
Werkt met populaire Angular i18n-bibliotheken
Better I18N vult je Angular i18n-bibliotheek aan — beheer vertalingen visueel, werk samen met vertalers en deploy via CDN.
Better I18N + @ngx-translate/core
De meest gebruikte Angular-vertaalbibliotheek. Runtime-vertalingen met pipes, directieven en service-injectie.Better I18N exporteert naar ngx-translate JSON-formaat. Bewerk vertalingen in ons dashboard, synchroniseer automatisch met je repository.
Better I18N + Angular i18n (built-in)
Angulars officiële i18n-systeem met AOT-compilatie, ICU-expressies en vertaalextractie tijdens de build.Exporteer naar Angular XLIFF-formaat. Better I18N beheert de vertaalworkflow, Angular CLI bouwt locale-specifieke bundels.
Better I18N + Transloco
Moderne, lichtgewicht i18n-bibliotheek voor Angular met lazy loading, uitgebreide plugins en uitstekende TypeScript-ondersteuning.Synchroniseer vertalingen naar Transloco JSON-formaat via Better I18Ns GitHub-integratie. Realtime updates met CDN-levering.
Gerelateerd
Bekijk andere framework-handleidingen
Get started
Begin met bouwen met Angular i18n
Gratis tier beschikbaar. Geen creditcard nodig.