Translate an Angular App into Spanish

What messages.xlf contains and what gets translated

Angular does not translate components directly: it extracts text marked with i18n in templates and $localize strings in TypeScript, then collects them in an XLIFF file. Each unit holds a source and, once translated, a target. Only that text is translated.

Dynamic parts appear as tags. In XLIFF 1.2, "Hello {{ name }}" becomes Hello <x id="INTERPOLATION" equiv-text="{{ name }}"/>; in XLIFF 2.0 the tag is a <ph>. The tags stay intact in the Spanish target: Hola, <x id="INTERPOLATION" equiv-text="{{ name }}"/>. Their position may move, because Spanish word order often differs from the source.

ICU expressions (plural, select) are translated branch by branch; keywords such as one, other or =0 are left as they are.

Spanish-specific issues in an Angular interface

• Length: Spanish runs longer than English. "Sign in" becomes "Iniciar sesión", "Settings" becomes "Configuración". Fixed-width buttons and crowded tab bars overflow first.
• Inverted punctuation: questions open with ¿ and exclamations with ¡, as in ¿Eliminar este archivo?. If a question is built in code from two $localize strings, the ¿ and the ? end up in different units; one string with an interpolation is safer.
• Plurals: CLDR gives Spanish three categories, one, many and other. many covers large round numbers ("un millón de usuarios", with "de"). If your ICU only has =1 and other, Angular falls back to other.
• Gender: "Bienvenido" or "Bienvenida"; a select on the user's gender avoids clumsy "Bienvenido/a".
• Register and variety: informal tú or formal usted, vosotros in Spain versus ustedes in Latin America, "ordenador" versus "computadora". Settle your target market before translating.
• Formats: dates, numbers and currencies come from Angular's locale data (DatePipe, CurrencyPipe), not from translation. With es, decimals use a comma.

What Manuce returns, and what it does not do

You get back the same XLIFF file in the same format: indentation, unit order, quotes, comments, line endings, encoding and BOM are preserved. Only the values, meaning the targets, change.

Each translated value is checked against its source for matching interpolations and tags. If a mismatch persists, the source value is kept and the report says so, so you know which string to review instead of discovering a missing {{ count }} at runtime.

Not translated: IDs (such as @@login.title), empty values, URLs, email addresses, numbers, colours, date formats and anything marked as non-translatable. The price is based on the words in the values, with tags and IDs excluded.

Manuce does not edit your angular.json, build the app or add a many branch that is absent from the source. Nor does it produce sworn or certified translations, which may matter if your terms of service require one.

Preparing the file before upload

• Run ng extract-i18n just before translation so the file matches the current code.
• Use stable custom IDs (i18n="@@cart.empty"): without them, editing the source text generates a new ID and the Spanish translation is orphaned.
• Add descriptions to ambiguous strings: "Save" can be "Guardar" (store) or "Ahorrar" (save money). The notes help your reviewers too.
• Merge sentence fragments into a single unit with interpolation, especially questions.
• Make sure plural ICUs cover at least one and other.

For a set of roughly 2,500 words, the free sample lets you judge the register before paying.

Checking the app after translation

1. Rename or copy the file to messages.es.xlf and check the target language attribute (target-language in 1.2, trgLang in 2.0).
2. Declare the es locale (or es-MX, es-419) in the project's i18n configuration and build: a broken tag shows up straight away.
3. Walk through the densest screens: navigation, form buttons, tables.
4. Test plurals with 0, 1 and 2 items, and confirmation dialogs for ¿ and ¡.
5. Read the report and deal with strings left in the source language.

In practice

1. Run ng extract-i18n to get an up-to-date messages.xlf.
2. Upload it to Manuce, choose Spanish and check the quote and free sample.
3. Download the translated file and the report of untouched strings.
4. Save it as messages.es.xlf, declare the es locale and build to test.