Translate an Angular App into English

What is in messages.xlf and what gets translated

ng extract-i18n collects every template text marked with i18n and every $localize string in your TypeScript into one file, messages.xlf, in XLIFF 1.2 (the default) or XLIFF 2.0. Each text becomes a unit with an ID, a source and, once translated, a target.

Interpolations do not appear as {{ user.name }} but as placeholders. In XLIFF 1.2, a German source might read:

<source>Hallo <x id="INTERPOLATION" equiv-text="{{ user.name }}"/>!</source>

XLIFF 2.0 uses <ph name="INTERPOLATION" .../> instead. The English target becomes Hello <x id="INTERPOLATION" .../>!: the placeholder stays exactly as it was and only the words around it change. The same applies to the placeholders wrapping links or bold text in your templates (START_LINK, CLOSE_LINK, START_BOLD_TEXT and so on).

Left untranslated: unit IDs (including custom ones such as @@loginButton), empty values, URLs, email addresses, numbers, colours, date formats, identifiers and anything marked as not translatable. Pricing is based on the words in the values only, with keys and tags excluded.

What changes when Angular strings move into English

ICU plurals. English has two CLDR plural categories, one and other, and zero takes the plural: «0 files». That differs from French, where zero is singular, and from Slavic languages with few and many. So {count, plural, one {1 Datei} other {{{count}} Dateien}} becomes {count, plural, one {1 file} other {{{count}} files}}. If you want a dedicated «No files» message, the =0 branch must already exist in the source. Extra branches such as few or many are simply never selected in English.

Punctuation. Spaces before colons and question marks (French style) go: Nom : becomes Name:. Guillemets « » or German „ “ become English quotation marks.

Capitalisation. US interfaces often capitalise every word of a button or heading («Save Changes»), while British usage tends towards sentence case («Save changes»). Pick one rule and apply it everywhere.

Length. English is usually shorter than French, German or Spanish, often by 10 to 15 % against French: «Enregistrer les modifications» becomes «Save changes». Overflow is rare, but buttons sized for the source text may look sparse.

British or American. Spelling (colour/color, cancelled/canceled, organisation/organization) is decided in the translation. Date order (DD/MM or MM/DD) and currency formatting are not in messages.xlf at all: they come from the locale data Angular loads for DatePipe, CurrencyPipe and DecimalPipe. Choosing en-GB or en-US in your configuration sets the dates, not the spelling.

What Manuce returns, and what it does not do

You get back the same XLIFF file, in the same version (1.2 or 2.0), with the English targets filled in. Indentation, unit order, quotes, comments, line endings, encoding and BOM are preserved: only the values change, so a diff against your original shows nothing but the targets.

Every translated value is checked against its source: the same INTERPOLATION, ICU and START_TAG_SPAN placeholders, the same variables. If a mismatch persists, the source value is kept and the report says so. The report lists the strings translated, the strings left as they were, and why (URL, number, empty value, placeholder not matched).

What Manuce does not do:

• it does not edit angular.json, your components or the locale data;
• it cannot see hard-coded text with no i18n attribute or $localize tag, because that text never reaches messages.xlf;
• it does not restructure ICU branches: the structure stays as in the source;
• it does not run your build or test the app.

Preparing the extraction and checking the English build

Before you extract:

• Use custom IDs for important texts (i18n="@@checkout.pay"). Without them, the ID is derived from the source text, so fixing a typo in the source changes the ID and orphans the English target.
• Add a description to short, ambiguous strings (i18n="close button on dialog|Schließen@@dialog.close"). A single word such as «Offen» or «Ouvert» could be Open or Opened; the description travels in the file and helps anyone reviewing it.
• Set the source locale: if the app is written in French, German or another language, declare it as sourceLocale in the project's i18n settings; otherwise Angular assumes en-US.

After delivery:

• save the file under an explicit name such as src/locale/messages.en-GB.xlf and declare it among the project locales;
• run ng build --localize: a missing or broken placeholder shows up as an error or warning;
• step through screens with plurals using 0, 1 and 2 items;
• review the strings the report left in the source language, and check spelling against the variant you want.

In practice

1. Mark texts with i18n or $localize, add stable @@ IDs, then run ng extract-i18n.
2. Upload messages.xlf to Manuce: the quote appears at once, based on the words in the values.
3. Read the free sample at your chosen level, then pay to start the translation.
4. Save the returned file as messages.en-GB.xlf (or en-US), declare it and run ng build --localize.
5. Read the report and test screens with plurals and interpolations.