Angular i18n built-in support - Step-by-Step Execution

Concept Flow - Angular i18n built-in support

Write template with i18n tags

↓

Run Angular compiler (ng extract-i18n)

↓

Generate translation files (XLIFF)

↓

Translate messages in files

↓

Build app with locale and translations

↓

App displays translated text based on locale

Angular i18n flow starts with marking text in templates, extracting messages, translating, then building the app with chosen locale to show translated content.

Execution Sample

Angular

<h1 i18n>Welcome to our app!</h1>
<p i18n="@@intro">This app helps you learn.</p>

This template marks text for translation using the i18n attribute.

Execution Table

Step	Action	Input/State	Output/Result
1	Template parsing	<h1 i18n>Welcome to our app!</h1>	Detects text 'Welcome to our app!' for translation
2	Run ng extract-i18n	Template files	Generates messages.xlf with extracted texts
3	Translate messages.xlf	messages.xlf	Translated messages file (e.g. messages.fr.xlf)
4	Build app with locale 'fr'	ng build --localize	App bundles include French translations
5	Run app in browser	fr locale build served	Displays 'Bienvenue dans notre application!' instead of English text

💡 App shows translated text based on the build locale

Variable Tracker

Variable	Start	After Extraction	After Translation	After Build	Final
Template Text	English text in template	Marked for translation	Replaced by translation keys	Bundles include translations	Displayed translated text at runtime
Translation Files	None	messages.xlf created	messages.fr.xlf created	Included in build	Used by app to show translations

Key Moments - 3 Insights

Why do we need to run 'ng extract-i18n' before translating?

Because 'ng extract-i18n' scans templates and creates a file with all texts to translate, as shown in execution_table step 2.

How does Angular know which language to show at runtime?

Angular uses the locale set during build to include the correct translations, explained in execution_table step 5.

What happens if a translation is missing for a locale?

Angular falls back to the original text in the template, so untranslated text appears in the default language.

Visual Quiz - 3 Questions

Look at the execution_table, what is generated after running 'ng extract-i18n'?

A messages.xlf file with extracted texts

B Translated app bundles

C Runtime locale detection code

D Template with i18n attributes

💡 Hint

Check execution_table row 2 for the output of 'ng extract-i18n'

At which step does the app include translated messages in its bundles?

A Step 1

B Step 3

C Step 4

D Step 5

💡 Hint

Look at execution_table row 4 describing the build process

According to the execution_table, when the fr locale build is run in browser, what text will the app display?

A English text from template

B French translated text

C No text shown

D Error message

💡 Hint

See execution_table row 5 for runtime display behavior

Concept Snapshot

Angular i18n built-in support:
- Mark text in templates with i18n attribute
- Run 'ng extract-i18n' to create translation files
- Translate messages in generated files
- Build app with --localize for target locales
- App shows translated text based on the target locale

Full Transcript

Angular i18n built-in support helps you translate your app's text. You start by marking text in your templates with the i18n attribute. Then you run the Angular command 'ng extract-i18n' which scans your templates and creates a file with all the texts to translate. You send this file to translators who create translated versions. When you build your app with the --localize option, Angular includes these translations in the app bundles. At runtime, the app shows the translated text for its target locale if available. If a translation is missing, it shows the original text. This process ensures your app can speak many languages smoothly.