Angular Academy · Lektion

Nachrichten extrahieren und übersetzen

Übersetzungsdateien erzeugen und ausfüllen

Nachrichten extrahieren und übersetzen ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Von markiertem Text zu Übersetzungsdateien

Sobald Text mit i18n markiert ist, kann Angular jede Nachricht in einer Übersetzungsquelldatei sammeln. Übersetzer übertragen sie in die jeweilige Zielsprache, und der Build führt diese Übersetzungen wieder zusammen. Diese Lektion behandelt die Extraktion und das Dateiformat.

ng extract-i18n ausführen

Der CLI-Befehl ng extract-i18n durchsucht Ihre App nach markierten Nachrichten und schreibt eine Übersetzungsquelldatei, standardmäßig messages.xlf.

ng extract-i18n
# generates messages.xlf in the project root

Ausgabeformat und Pfad auswählen

Sie können Format und Ziel auswählen. XLIFF (xlf) ist die Standardeinstellung; auch XLIFF 2 und das JSON-basierte Format arb werden unterstützt.

ng extract-i18n --format=xlf2 --output-path=src/locale

Aufbau einer XLF-Datei

Jede markierte Nachricht wird zu einer trans-unit mit einer source, also Ihrem Originaltext, und einem leeren target, das der Übersetzer ausfüllt.

<trans-unit id="homeTitle" datatype="html">
  <source>Welcome to our store</source>
  <target></target>
</trans-unit>

Dateien pro Locale erstellen

Kopieren Sie messages.xlf in jeweils eine Datei pro Ziel-Locale, benennen Sie sie nach dem Locale-Code und übersetzen Sie anschließend die Ziele.

src/locale/messages.xlf       # source
src/locale/messages.fr.xlf    # French
src/locale/messages.es.xlf    # Spanish

Übersetzungen eintragen

Der Übersetzer ersetzt jedes leere target durch den lokalisierten Text und behält dabei dieselbe id bei, damit Angular die Zuordnung zum Quelltext kennt.

<trans-unit id="homeTitle">
  <source>Welcome to our store</source>
  <target>Bienvenue dans notre boutique</target>
</trans-unit>

Platzhalter müssen erhalten bleiben

Interpolationen erscheinen als <x>-Platzhalter-Tags. Übersetzer müssen diese beibehalten, dürfen sie aber an die Grammatik der Zielsprache anpassen.

<source>Hello, <x id="INTERPOLATION" equiv-text="{{name}}"/>!</source>
<target>Bonjour, <x id="INTERPOLATION"/> !</target>

Nach Änderungen erneut extrahieren

Wenn Sie markierten Text hinzufügen oder ändern, führen Sie ng extract-i18n erneut aus. Benutzerdefinierte @@-IDs erhalten bestehende Übersetzungen; automatisch erzeugte IDs können sich ändern und eine erneute Übersetzung erforderlich machen.

Locales in angular.json konfigurieren

Registrieren Sie jede Locale und ihre Übersetzungsdatei in der i18n-Konfiguration des Projekts, damit der Build weiß, wo er sie findet.

"i18n": {
  "sourceLocale": "en",
  "locales": {
    "fr": "src/locale/messages.fr.xlf",
    "es": "src/locale/messages.es.xlf"
  }
}

Fehlende Übersetzungen behandeln

Sie können festlegen, wie der Build mit nicht übersetzten Nachrichten umgeht: error bricht den Build ab, warning protokolliert die Meldung und verwendet den Quelltext, ignore bleibt still. Verwenden Sie in CI error, um Lücken zu erkennen.

"options": { "i18nMissingTranslation": "error" }

Mit Übersetzungstools arbeiten

XLIFF ist ein Industriestandard. Daher können professionelle Übersetzungsplattformen und Tools wie Crowdin oder Lokalise die extrahierte Datei importieren und fertige Übersetzungen wieder im selben Format exportieren.

Schnelltest

Was erzeugt ng extract-i18n?

Zusammenfassung

Führen Sie ng extract-i18n aus, um markierten Text in einer XLIFF-Quelldatei aus trans-units zu sammeln. Kopieren Sie diese Datei für jede Locale, füllen Sie die targets aus und bewahren Sie dabei die Platzhalter, registrieren Sie die Locales in angular.json und setzen Sie i18nMissingTranslation, um Lücken zu erkennen. Stabile @@-IDs schützen Übersetzungen bei Änderungen.

Häufig gestellte Fragen

Ist die Lektion „Nachrichten extrahieren und übersetzen“ kostenlos?

Ja — der vollständige Text von „Nachrichten extrahieren und übersetzen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Nachrichten extrahieren und übersetzen“?

Übersetzungsdateien erzeugen und ausfüllen Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Nachrichten extrahieren und übersetzen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Angular Academy