Schnelle Antwort
Um eine Angular-App im Jahr 2026 zu lokalisieren, verwende das native Paket @angular/localize. Dies ist der empfohlene Weg des Angular-Teams, da die Übersetzung während der Kompilierzeit (Build-Time) erfolgt, was ein Bundle ohne Laufzeit-Overhead (Zero-Runtime Overhead) ergibt.
Einführung
Die Lokalisierung (i18n) in Angular hat sich stark weiterentwickelt. Während externe Bibliotheken wie ngx-translate früher der Standard waren, bietet Angular jetzt eine robuste und performante Lösung über @angular/localize.
In diesem Guide decken wir alles ab, was du wissen musst, um eine produktionsbereite mehrsprachige Angular-App im Jahr 2026 einzurichten.
Warum @angular/localize?
- Performance: Übersetzungen werden beim Build zusammengeführt. Deine App verbringt keine Zeit damit, Übersetzungen beim Start zu parsen.
- Zuverlässigkeit: Offiziell von Google unterstützt.
- Standards: Verwendet den Industriestandard für Nachrichtenformate.
Schritt 1: Installation
Füge das Lokalisierungspaket zu deinem Projekt hinzu:
Terminalng add @angular/localize
Dieser Befehl konfiguriert automatisch deine angular.json und installiert die notwendigen Pakete.
Schritt 2: Text für die Übersetzung markieren
Verwende das Attribut i18n in deinen HTML-Templates.
HTML<h1 i18n="@@homePageTitle">Willkommen in unserer App</h1> <p i18n="@@homeDescription">Dies ist eine lokalisierte Beschreibung.</p>
Für Text im TypeScript-Code verwende die markierte Funktion $localize.
TypeScriptconst title = $localize`:@@pageTitle:Mein Seitentitel`;
Schritt 3: Extrahieren der Übersetzungen
Du musst diese markierten Strings in eine Quellübersetzungsdatei extrahieren.
Terminalng extract-i18n --output-path src/locale
Dies generiert eine Datei (normalerweise XLF oder JSON), die alle deine Nachrichten enthält.
Schritt 4: Übersetzung
Kopiere die Quelldatei für jede Zielsprache (z.B. messages.de.xlf, messages.fr.xlf) und übersetze den Inhalt.
XML1<trans-unit id="homePageTitle"> 2 <source>Welcome to our app</source> 3 <target>Willkommen in unserer App</target> 4</trans-unit>
Verwaltung von Übersetzungen mit IntlPull
Die manuelle Verwaltung von XLF/JSON-Dateien kann zum Albtraum werden. IntlPull automatisiert diesen Workflow für Angular-Entwickler:
- Sync: Pushe deine extrahierten Dateien zu IntlPull.
- KI-Übersetzung: Erhalte sofort hochwertige Übersetzungen für alle deine Zielsprachen.
- Pull: Hole die übersetzten Dateien bereit für den Build.
Terminalnpx @intlpullhq/cli push src/locale/messages.xlf
Build-Konfiguration
Konfiguriere deine angular.json, um verschiedene Versionen deiner App für jede Sprache zu generieren.
JSON1"i18n": { 2 "sourceLocale": "en", 3 "locales": { 4 "de": "src/locale/messages.de.xlf", 5 "fr": "src/locale/messages.fr.xlf" 6 } 7}
Dann, beim Ausführen von ng build, erstellt Angular separate Ordner (dist/my-app/en/, dist/my-app/de/) für jede Sprache.
FAQ
Was ist der Unterschied zu ngx-translate?
ngx-translate arbeitet zur Laufzeit (Runtime), was einen dynamischen Sprachwechsel ermöglicht, aber die Performance beeinträchtigt. @angular/localize erstellt separate Builds, was performanter und besser für SEO ist.
Wie handhabe ich den Sprachwechsel?
Mit @angular/localize bedeutet ein Sprachwechsel das Navigieren zu einer anderen URL (z.B. von /en/ zu /de/). Dies ist der empfohlene Weg für SEO.
Zusammenfassung
Die Verwendung von @angular/localize ist die Best Practice für Angular i18n im Jahr 2026. Kombiniere es mit IntlPull, um den Schmerz der XML/JSON-Übersetzungsdateiverwaltung zu beseitigen.
