Internationalisierung für Angular, Teil 1: Bordmittel

Bei der Konzeption und Umsetzung von Angular ab Version 2 lag der Fokus stets auf Performance. Auch im Bereich Internationalisierung hat diese Schwerpunktsetzung Spuren hinterlassen.

Know-how  –  0 Kommentare
Internationalisierung mit Angular-Bordmitteln

Internationalisierung, kurz I18n oder L10n für Localization, bezeichnet das Ziel, Anwendungen für unterschiedliche Kulturen, Sprachen und Regionen einfach anpassen zu können. Schon mit der ersten Version von Angular, besser bekannt als AngularJS, gab es für diese Aufgabe Mittel und Wege. Ab Version 2 nutzt Angular jedoch einen ganz anderen Ansatz. Durch Aufruf des Kommandozeilen-Tools ng-xi18n, das über das Modul @angular/compiler-cli verfügbar ist, oder über die Angular CLI mit dem Befehl ng xi18n wird im HTML nach markierten Stellen gesucht, die das Framework übersetzen soll. Die daraus generierte XML-Datei integriert der Angular-Compiler nach der Übersetzung wieder in die Applikation.

Beim Dateiformat kann man sich zwischen dem XML Localisation Interchange File Format (XLIFF) in Version 1.2 oder 2.0 (ab Angular 4.1) sowie XML Message Bundles (XMB) entscheiden. Im weiteren Verlauf wird das Dateiformat XLIFF (1.2), kurz xlf, genutzt.

Nachdem entweder über die Angular CLI ng xi18n oder direkt das Tool ng-xi18n im Projekthauptverzeichnis gestartet wurde und fehlerfrei durchgelaufen ist, erscheint im Projekt die Datei messages.xlf:

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file source-language="en" datatype="plaintext" original="ng2.template">
<body>
</body>
</file>
</xliff>

Da noch keine Texte zur Übersetzung markiert wurden, ist der Inhalt noch überschaubar, zeigt aber schon den grundsätzlichen Aufbau der Datei und das XLIFF-Format. Im folgenden Quelltext kommt das HTML-Attribut i18n zum Einsatz. Es markiert dort die Texte einer Tabelle, genauer gesagt eines Tabellenkopfes, welche Flugdaten anzeigen soll:

<table class="table table-striped">
<thead>
<tr>
<th i18n>From</th>
<th i18n="Beschreibung des Feldes">To</th>
<th i18n="Spezielle Bedeutung|Beschreibung des ↵
Feldes">Passengers</th>
<th>
<ng-container i18n="@@eigene.id">Children</ng-container>
</th>
<th>
<!--i18n: Spezielle Bedeutung|Beschreibung des Feldes -->
Return Flight
<!--/i18n-->
</th>
<th i18n-title title="Booking Date">#</th>
</tr>
</thead>
</table>

Dem Attribut i18n lässt sich eine Beschreibung und, durch eine Pipe getrennt, eine Bedeutung als Zusatzinformation mitgeben. Es ist auch möglich, ab Version 4 von Angular durch @@ eine ID anzugeben. Diese Informationen tauchen zur Orientierung in der Übersetzungsdatei auf, haben aber sonst keinen Einfluss:

<th i18n>Text</th>
<th i18n="Beschreibung">Text</th>
<th i18n="Bedeutung|Beschreibung">Text</th>
<th i18n="@@id">Text</th>
<th i18n="Bedeutung|Beschreibung @@id">Text</th>

Um Texte auch ohne einen eigenen HTML-Tag zu markieren, können Entwickler ng-container einsetzen:

<ng-container i18n="Bedeutung|Beschreibung@@ID">Text</ng-container>

Als Alternative eignet sich ein HTML-Kommentar:

<!--i18n: Bedeutung|Beschreibung@@ID -->
Text
<!--/i18n-->

Um HTML-Attribute zu markieren, reicht es, sie per Bindestrich an i18n anzuhängen. Auch hier sind Beschreibung, Bedeutung und ID möglich:

<th i18n-title="Bedeutung|Beschreibung@@ID" title="Text">#</th>

Es zeigt sich bereits ein entscheidender Unterschied zu Libraries wie ngx-translate. Während in ihnen Referenzen vergeben werden, welche die Bibliothek später durch den eigentlichen Inhalt ersetzt, bleibt mit den neuen Tools der ursprüngliche Text erhalten. Dadurch wird er auch nach der Markierung angezeigt, selbst wenn keine Übersetzung in Form einer XML-Datei vorhanden ist.

Eine eigene Übersetzungsdatei in Englisch ist deshalb für die Beispieltabelle nicht zu erstellen. Das Angeben von Beschreibung, Bedeutung und ID über den Attributwert kann Übersetzern die Orientierung später wesentlich erleichtern.