Angular bietet mit seinem Internationalisierungsframework (i18n) umfassende Werkzeuge für die Entwicklung mehrsprachiger Anwendungen. Dieses Kapitel führt Sie durch die wichtigsten Konzepte und Implementierungen von Übersetzungen in Angular.
Internationalisierung (i18n) bezeichnet den Prozess, eine Anwendung so zu gestalten, dass sie an verschiedene Sprachen und Regionen angepasst werden kann, ohne den Quellcode zu ändern. Lokalisierung (l10n) ist dagegen der Prozess der tatsächlichen Anpassung an eine bestimmte Sprache oder Region.
In Angular umfasst dies: - Übersetzung von Texten - Formatierung von Datum, Zahlen und Währungen - Anpassung von Richtlinien für rechts-nach-links Sprachen - Berücksichtigung kultureller Besonderheiten
Angular bietet zwei Hauptansätze für die Internationalisierung:
Dieser Ansatz erstellt separate Builds für jede Sprache. Die Vorteile sind: - Bessere Performance, da keine Übersetzungen zur Laufzeit geladen werden müssen - Vollständige AOT-Kompatibilität (Ahead-of-Time Kompilierung)
Der Nachteil ist, dass für jede unterstützte Sprache ein separater Build erforderlich ist.
Bei diesem Ansatz werden Übersetzungen zur Laufzeit geladen. Die Vorteile sind: - Ein einzelner Build unterstützt mehrere Sprachen - Sprachänderungen können ohne Neuladen der Anwendung durchgeführt werden
Der Nachteil ist eine möglicherweise leicht verringerte Performance.
Ab Angular 9 wurde das i18n-Framework in separate Pakete ausgelagert. Für ein neues Projekt:
ng add @angular/localizeDies fügt die notwendigen Abhängigkeiten zur
package.json hinzu und aktualisiert die Konfiguration.
<h1 i18n="@@welcomeHeader">Willkommen zu unserer Anwendung</h1>Die i18n-Attribute bieten verschiedene Möglichkeiten: -
i18n - Markiert den Text zur Übersetzung -
i18n="bedeutung|beschreibung@@id" - Mit zusätzlichen
Metadaten: - bedeutung - Kontext der Übersetzung -
beschreibung - Hinweise für Übersetzer - id -
Eindeutige ID für die Übersetzung
Für Attribute wie title oder
placeholder:
<input placeholder="Name eingeben" i18n-placeholder="@@namePlaceholder">Für Übersetzungen im TypeScript-Code verwenden Sie
$localize:
import { Component } from '@angular/core';
import { $localize } from '@angular/localize/init';
@Component({
selector: 'app-root',
template: `<h1>{{ title }}</h1>`
})
export class AppComponent {
title = $localize`Willkommen zu unserer Anwendung`;
}Um die zu übersetzenden Texte zu extrahieren:
ng extract-i18n --output-path src/localeDies erzeugt eine messages.xlf-Datei im angegebenen
Verzeichnis. Diese Datei folgt dem XLIFF-Format (XML Localization
Interchange File Format).
Kopieren Sie die generierte messages.xlf für jede
Sprache und benennen Sie sie entsprechend:
messages.de.xlf für Deutschmessages.en.xlf für Englischmessages.fr.xlf für FranzösischPassen Sie dann die Übersetzungen in jeder Datei an. Ein Beispiel für
eine messages.de.xlf:
<trans-unit id="welcomeHeader" datatype="html">
<source>Welcome to our application</source>
<target>Willkommen zu unserer Anwendung</target>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.html</context>
<context context-type="linenumber">2</context>
</context-group>
</trans-unit>In der angular.json konfigurieren Sie die verschiedenen
Sprachen:
{
"projects": {
"my-app": {
"architect": {
"build": {
"configurations": {
"production": { ... },
"de": {
"localize": ["de"],
"baseHref": "/de/"
},
"en": {
"localize": ["en"],
"baseHref": "/en/"
}
}
},
"serve": {
"configurations": {
"production": { ... },
"de": {
"browserTarget": "my-app:build:de"
},
"en": {
"browserTarget": "my-app:build:en"
}
}
}
}
}
}
}Für jede Sprache erstellen Sie einen separaten Build:
ng build --configuration=de
ng build --configuration=enMit neueren Angular-Versionen (17-18) wurden die Möglichkeiten zur Internationalisierung erweitert und vereinfacht.
Das @angular/localize-Paket wurde stark verbessert und
bietet nun:
Bessere Integration mit Ivy: Der neue Renderer unterstützt Übersetzungen effizienter.
Vereinfachte API: Die API wurde konsistenter gestaltet.
Formatierungs-APIs: Datums-, Zahlen- und Währungsformatierung gemäß Lokalisierungsstandards.
Transloco ist eine moderne Alternative, die in neueren Angular-Versionen gut funktioniert:
ng add @ngneat/translocoMit Transloco können Sie Übersetzungen dynamisch laden:
// app.module.ts
import { HttpClientModule } from '@angular/common/http';
import { TranslocoModule, TRANSLOCO_CONFIG, TranslocoConfig } from '@ngneat/transloco';
import { translocoLoader } from './transloco.loader';
@NgModule({
imports: [
HttpClientModule,
TranslocoModule
],
providers: [
{
provide: TRANSLOCO_CONFIG,
useValue: {
availableLangs: ['en', 'de'],
defaultLang: 'de',
reRenderOnLangChange: true,
prodMode: environment.production
} as TranslocoConfig
},
translocoLoader
]
})
export class AppModule {}Verwendung in Templates:
<h1>{{ 'welcomeHeader' | transloco }}</h1>Oder in TypeScript:
import { TranslocoService } from '@ngneat/transloco';
export class AppComponent {
constructor(private translocoService: TranslocoService) {}
changeLanguage(lang: string) {
this.translocoService.setActiveLang(lang);
}
getTranslatedText() {
return this.translocoService.translate('welcomeHeader');
}
}In aktuellen Angular-Versionen wurde die Lokalisierungsunterstützung weiter verbessert:
Vereinfachte Konfiguration: Die Konfiguration in
der angular.json wurde übersichtlicher gestaltet.
Verbesserte Laufzeitunterstützung: Bessere Integration für dynamisches Laden von Übersetzungen.
Erweiterter $localize-Support: Erweiterte Formatierungsoptionen und bessere Typunterstützung.
Standalone-Komponenten-Unterstützung: Bessere Integration mit dem Standalone-API-Ansatz.
Beispiel für eine moderne Konfiguration in aktuellen Angular-Versionen:
{
"projects": {
"my-app": {
"i18n": {
"sourceLocale": "en",
"locales": {
"de": {
"translation": "src/locale/messages.de.xlf",
"baseHref": "/de/"
},
"fr": {
"translation": "src/locale/messages.fr.xlf",
"baseHref": "/fr/"
}
}
}
}
}
}Für Texte, die je nach Anzahl variieren:
<span i18n>
{itemCount, plural,
=0 {Keine Elemente}
=1 {Ein Element}
other {# Elemente}
}
</span>Für geschlechtsspezifische Texte:
<span i18n>
{gender, select,
male {Er hat}
female {Sie hat}
other {Die Person hat}
} das Dokument geteilt.
</span>Komplexe Kombinationen sind möglich:
<span i18n>
{gender, select,
male {Er hat}
female {Sie hat}
other {Die Person hat}
} {itemCount, plural,
=0 {keine Elemente}
=1 {ein Element}
other {# Elemente}
} geteilt.
</span>Für Sprachen wie Arabisch oder Hebräisch:
<html dir="rtl" lang="ar">Zusammen mit entsprechenden CSS-Anpassungen:
/* Für RTL-Sprachen */
[dir='rtl'] .some-element {
margin-right: 0;
margin-left: 10px;
}Verwenden Sie Schlüssel statt direkter Texte: Dies erleichtert die Wartung.
Dokumentieren Sie den Kontext: Geben Sie den Übersetzern Hinweise zum Kontext.
Vermeiden Sie Verkettungen: Vollständige Sätze sind besser als zusammengesetzte Teile.
Testen Sie mit Pseudoübersetzungen: So finden Sie nicht extrahierte Texte.
Beachten Sie kulturelle Unterschiede: Farben, Symbole und Bilder können unterschiedliche Bedeutungen haben.
Performance-Optimierung: Bei Runtime-Übersetzungen nur die benötigten Sprachdateien laden.
Verwenden Sie sprachspezifische Routing-Strategien: Dies verbessert die SEO.
Angular Universal unterstützt Internationalisierung in SSR-Anwendungen:
// server.ts
import { ngExpressEngine } from '@nguniversal/express-engine';
import { REQUEST, RESPONSE } from '@nguniversal/express-engine/tokens';
app.engine('html', (_, options, callback) => {
const engine = ngExpressEngine({
bootstrap: AppServerModule,
providers: [
{ provide: REQUEST, useValue: options.req },
{ provide: RESPONSE, useValue: options.res }
]
});
engine(_, options, callback);
});
// Spracherkennung basierend auf URL
app.get(/^\/(de|en|fr)\//, (req, res, next) => {
const lang = req.path.split('/')[1];
req.language = lang;
next();
});Im AppServerModule können Sie dann die erkannte Sprache
verwenden.