Translate an Angular app into German

What messages.xlf holds and what must come back

With Angular's built-in i18n, text marked with the i18n attribute in templates and with $localize in TypeScript is extracted by ng extract-i18n into messages.xlf. The file uses XLIFF 1.2 by default, or XLIFF 2.0 if you ask for it. That file is what gets translated: each unit holds a <source> and expects a German <target>.

The tricky part is the markup inside sentences. A template such as You have received {{ count }} <b>messages</b> becomes, in XLIFF 1.2, a source peppered with <x id="INTERPOLATION"/> and <x id="START_BOLD_TEXT"/>. In German those placeholders often move, because the past participle goes to the end: "Sie haben {{ count }} <b>Nachrichten</b> erhalten". If a placeholder is dropped or left unclosed, the German build fails.

Unit IDs must stay untouched, whether Angular generated them or you set them with @@ (for example i18n="@@saveButton"). The compiler uses them to match each translation to its template.

German in an Angular UI: length, capitals, plurals

• Length. German text often runs 20 to 35% longer than English, and compounds do not break on their own. "Access rights" becomes "Zugriffsberechtigungen", and "Account settings" becomes "Kontoeinstellungen". Tabs, buttons and table columns sized for the source language can overflow as a result.
• Capitals. Every noun is capitalised, buttons included: "Add to basket" becomes "In den Warenkorb". A CSS rule such as text-transform: capitalize or lowercase written for English will produce wrong German.
• Form of address. Sie is expected in business software, while du is common in consumer apps. Mixing them in one interface ("Melden Sie sich an" on one screen, "Speichere deine Daten" on another) stands out immediately.
• Punctuation. German puts no space before "?" or ":" and uses „…“ quotation marks. If your source is French, the non-breaking space in "Mot de passe oublié ?" disappears: "Passwort vergessen?".
• ICU plurals. German has two CLDR categories, one and other, the same as English. So {count, plural, =0 {No files} =1 {One file} other {{{count}} files}} becomes =0 {Keine Datei} =1 {Eine Datei} other {{{count}} Dateien}. The keywords stay as they are; only the text inside the braces changes. If your source is French, where zero falls under one, check that case, because in German zero is other ("0 Dateien").

What Manuce returns, and what it does not do

You upload messages.xlf, or a copy named messages.de.xlf, in XLIFF 1.2 or 2.0. Manuce fills in the German targets and keeps the interpolation placeholders. The file you get back is the same file: indentation, unit order, quotes, comments, line endings, encoding and BOM are all preserved. Only the values change, so the diff in your repository stays readable.

Every translated value is checked against its source for matching variables and tags. If a mismatch persists, such as a missing <x id="INTERPOLATION_1"/>, the source value is kept and the report says so.

Some content is never translated: IDs, empty values, URLs, email addresses, numbers, colours, date formats and anything marked as non-translatable. The quote covers the words in the values only; tags and IDs are excluded.

You receive the XLIFF file ready to drop back into the project, usually under src/locale/. It comes with a report listing the strings translated, the strings left as they were, and the reason for each.

Manuce does not edit your templates or angular.json, does not build the app and does not check the rendered layout. Text hard-coded in a component without i18n or $localize is not in the file, so it will not be translated. For terms and conditions (AGB) aimed at German customers, plan a legal review. Manuce does not provide sworn or certified translation.

Preparing the file and checking the German build

1. Give ambiguous labels some context with a meaning and a description: i18n="button|Saves the profile@@saveProfile". "Register" can mean "Registrieren" (sign up) or "Verzeichnis" (a list), and a bare string gives no way to tell.
2. Check the file header: target-language="de" on <file> in XLIFF 1.2, or trgLang="de" on the root element in 2.0.
3. Declare the "de" locale in the i18n block of angular.json, pointing to the translated file, then run ng build --localize.
4. Go through the densest screens: tab bars, table headers, fixed-width buttons. With lang="de" on the page, the CSS rule hyphens: auto lets the browser break long compounds.
5. Check the pipes. Under the de locale, DatePipe shows 15.03.2025 and CurrencyPipe shows 1.234,56 €. These formats come from Angular's locale data, not from the translation, so a date hard-coded inside a string stays as written.
6. Read the report: every string left in the source language is listed there with its reason.

In practice

1. Run ng extract-i18n and copy messages.xlf to messages.de.xlf.
2. Upload the file to Manuce: the quote appears straight away, and you can get one paragraph translated free to judge the result.
3. Download the German XLIFF file and the string report.
4. Put the file back in the project, declare the de locale in angular.json and run ng build --localize.
5. Check dense screens, plurals and any strings flagged in the report.