Angular Academy · Lesson

Extracting and Translating Messages

Generate and fill translation files.

Extracting and Translating Messages is a free Angular Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

From Marked Text to Translation Files

Once text is marked with i18n, Angular can collect every message into a translation source file. Translators fill in each target language, and the build merges those translations back in. This lesson covers extraction and the file format.

Running ng extract-i18n

The CLI command ng extract-i18n scans your app for marked messages and writes a translation source file (default messages.xlf).

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

Choosing Output Format and Path

You can pick the format and destination. XLIFF (xlf) is the default; XLIFF 2 and JSON-based arb are also supported.

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

Anatomy of an XLF File

Each marked message becomes a trans-unit with a source (your original text) and an empty target the translator fills in.

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

Creating Per-Locale Files

Copy messages.xlf to one file per target locale, naming it by locale code, then translate the targets.

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

Filling In Translations

The translator replaces each empty target with the localized text, keeping the same id so Angular knows which source it matches.

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

Placeholders Must Be Preserved

Interpolations appear as <x> placeholder tags. Translators must keep them, but may reorder them to fit the target grammar.

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

Re-Extracting After Changes

When you add or change marked text, re-run ng extract-i18n. Custom @@ IDs keep existing translations intact; auto-generated IDs may change and need re-translation.

Configuring Locales in angular.json

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

Handling Missing Translations

You can tell the build how to treat untranslated messages: error fails the build, warning logs and uses the source text, ignore stays silent. Use error in CI to catch gaps.

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

Working with Translation Tools

XLIFF is an industry standard, so professional translation platforms (and tools like Crowdin or Lokalise) can import the extracted file and export completed translations back into the same format.

Quick Check

What does ng extract-i18n produce?

Recap

Run ng extract-i18n to gather marked text into an XLIFF source file of trans-units. Copy it per locale, fill the targets while preserving placeholders, register locales in angular.json, and set i18nMissingTranslation to catch gaps. Stable @@ IDs protect translations across edits.

Frequently asked questions

Is the “Extracting and Translating Messages” lesson free?

Yes — the full text of “Extracting and Translating Messages” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

What will I learn in “Extracting and Translating Messages”?

Generate and fill translation files. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Extracting and Translating Messages” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy