Prerequisites
- Angular 17+ application
- Node.js 18+
- Angular CLI
Common Challenges
Problems developers face when localizing Angular apps—and how IntlPull helps.
Build-Per-Locale
Separate build for each locale. Build times multiply. Deployment complexity increases.
No Runtime Switching
Can't switch locale without page reload. Each locale is a separate app.
XLIFF Complexity
XLIFF is verbose XML. Not developer-friendly for manual editing. Need proper tooling.
@angular/localize Features
Why @angular/localize is a great choice for Angular localization.
Build-Time Translation
Translations compiled into build. Zero runtime overhead. One build per locale.
vs runtime loading
ICU MessageFormat
Full ICU syntax support. Complex plurals, selects, and rich formatting.
vs basic interpolation
CLI Integration
ng extract-i18n generates XLIFF/XMB. ng build with localize flag creates locale bundles.
vs manual extraction
Attribute Translation
i18n attribute on elements. i18n-title, i18n-placeholder for attribute translation.
vs text-only solutions
Date/Number Pipes
DatePipe, CurrencyPipe, DecimalPipe are locale-aware out of the box.
vs external formatters
Enterprise Ready
XLIFF format support. Translation agency workflows. Auditable extraction.
vs casual i18n
Quick Setup
Get @angular/localize running in your Angular project.
Add Localize Package
Install the Angular localize package.
ng add @angular/localizeMark Text for Translation
Use i18n attribute on template elements.
<h1 i18n="@@welcomeHeader">Welcome to our application</h1>
<p i18n="@@welcomeDesc">This is the welcome page description.</p>
<!-- With meaning and description -->
<button i18n="submit button|Button to submit the form@@submitBtn">
Submit
</button>
<!-- ICU plural -->
<p i18n="@@itemCount">
{count, plural,
=0 {No items}
=1 {One item}
other {{{count}} items}
}
</p>Extract Messages
Generate translation source file.
ng extract-i18n --output-path src/locale --format xlfConfigure Builds
Set up locale builds in angular.json.
{
"projects": {
"your-app": {
"i18n": {
"sourceLocale": "en",
"locales": {
"es": "src/locale/messages.es.xlf",
"fr": "src/locale/messages.fr.xlf"
}
},
"architect": {
"build": {
"options": {
"localize": true
}
}
}
}
}
}Build for Locales
Generate builds for all locales.
ng build --localizeIntlPull Integration
Connect IntlPull to manage translations professionally.
Install IntlPull CLI
Add the CLI for translation management.
npm install -D @intlpull/cliPush Source Messages
Upload extracted XLIFF to IntlPull.
npx intlpull push --source ./src/locale/messages.xlf --format xliffPull Translations
Download translated XLIFF files.
npx intlpull pull --format xliff --output ./src/localeAutomate in CI
Add translation sync to your pipeline.
# .github/workflows/build.yml
jobs:
build:
steps:
- run: ng extract-i18n --output-path src/locale
- run: npx intlpull push --source ./src/locale/messages.xlf --format xliff
- run: npx intlpull pull --format xliff --output ./src/locale
- run: ng build --localizeFrequently Asked Questions
Related Guides
React i18next Localization Guide
Complete guide to React localization with react-i18next. Setup, lazy loading, namespaces, SSR, and IntlPull integration for production i18n.
Vue.js Localization with vue-i18n
Complete guide to Vue 3 localization with vue-i18n. Composition API, lazy loading, and IntlPull integration for production i18n.