Angular Academy · Lesson

Extracting and Translating Messages

Generate and fill translation files.

Lesson 2 of 413 steps

Extracting and Translating Messages is a free Angular Academy lesson on CoddyKit. This is lesson 2 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.

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?

Answer it in the interactive lesson

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.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 38
Lessons: 144

Start learning free View the full course

Frequently Asked Questions

Is the “Extracting and Translating Messages” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “Extracting and Translating Messages”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.

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