Built-in i18n

// Typical pre-i18n pattern — translation map + pipe or serviceconst translations = {  'en': { 'welcome': 'Welcome', 'logout': 'Log out' },  'fr': { 'welcome': 'Bienvenue', 'logout': 'Se déconnecter' },};
@Injectable({ providedIn: 'root' })export class TranslateService {  private locale = 'en';  translate(key: string): string {    return translations[this.locale][key] ?? key;  }}

Templates with i18n attributes + TypeScript with $localize        ↓ng extract-i18n        ↓messages.xlf (XLIFF XML file listing every translatable string with its ID)        ↓Translator fills in <target> elements        ↓messages.fr.xlf, messages.de.xlf, messages.ar.xlf

ng build --localize        ↓Compiler reads messages.fr.xlfFor every i18n-marked string or $localize call:  Replace source string → French translation (inlined in JS)        ↓dist/my-app/fr/   ← complete app in French, no translation servicedist/my-app/de/   ← complete app in German, no translation servicedist/my-app/en-US/ ← complete app in English (source locale)

ng add @angular/localize

<!-- Basic — Angular generates an automatic ID from the content hash --><h1 i18n>Hello, world!</h1><p i18n>Welcome to our application.</p>
<!-- With meaning|description — helps translators understand context --><h1 i18n="site header|The main page heading">Hello, world!</h1><p i18n="home page|Welcome message for new users">  Welcome to our application.</p>
<!-- With custom ID — stable across content changes, required if content changes often --><h1 i18n="@@site-header">Hello, world!</h1><h1 i18n="site header|Greeting@@site-header">Hello, world!</h1>

i18n="meaning|description@@custom-id"

<!-- Translate the alt attribute --><img src="logo.png" i18n-alt alt="Angular logo" />
<!-- Translate placeholder on an input --><input i18n-placeholder placeholder="Search…" />
<!-- Translate aria-label for accessibility --><button i18n-aria-label aria-label="Close dialog">×</button>

import '@angular/localize/init';
// Basicconst message = $localize`Hello, world!`;
// With metadata (meaning|description@@id)const header = $localize`:site header|Main page heading@@site-header:Hello, world!`;
// With dynamic values — name the placeholder with :name: syntaxconst greeting = $localize`Hello, ${userName}:userName:!`;const summary = $localize`There are ${items.length}:itemCount: items in your cart.`;
// In a service@Injectable({ providedIn: 'root' })export class NotificationService {  getWelcomeMessage(name: string): string {    return $localize`Welcome back, ${name}:name:!`;  }}

<!-- Adapts to the user's locale plural rules automatically --><p i18n>  You have {itemCount, plural,    =0 {no notifications}    =1 {one notification}    other {{{ itemCount }} notifications}  }.</p>

<p i18n>The author is  {gender, select,    male {a male author}    female {a female author}    other {an author}  }.</p>

<p i18n>  {gender, select,    male {He sent {count, plural, =1 {a message} other {{{count}} messages}}}    female {She sent {count, plural, =1 {a message} other {{{count}} messages}}}    other {They sent {count, plural, =1 {a message} other {{{count}} messages}}}  }</p>

ng extract-i18n# Output: messages.xlf in the project root
# With optionsng extract-i18n --output-path src/locale --out-file messages.xlf --format xlf2

cp src/locale/messages.xlf src/locale/messages.fr.xlfcp src/locale/messages.xlf src/locale/messages.de.xlf

<!-- messages.fr.xlf --><trans-unit id="site-header" datatype="html">  <source>Hello, world!</source>  <target>Bonjour le monde !</target>  <note priority="1" from="description">Main page heading</note></trans-unit>
<trans-unit id="3935776912">  <source>Welcome to our application.</source>  <target>Bienvenue dans notre application.</target></trans-unit>

{  "projects": {    "my-app": {      "i18n": {        "sourceLocale": "en-US",        "locales": {          "fr": {            "translation": "src/locale/messages.fr.xlf",            "baseHref": "/fr/"          },          "de": {            "translation": "src/locale/messages.de.xlf",            "baseHref": "/de/"          },          "ar": {            "translation": "src/locale/messages.ar.xlf",            "baseHref": "/ar/"          }        }      },      "architect": {        "build": {          "options": {            "localize": true          }        }      }    }  }}

# Build all configured locales at onceng build --localize
# Output:# dist/my-app/en-US/   ← source locale# dist/my-app/fr/      ← French# dist/my-app/de/      ← German# dist/my-app/ar/      ← Arabic
# Build a single locale (faster during development)ng build --localize fr
# Serve a single locale in dev mode (only one locale at a time)ng serve --localize fr

@Component({  selector: 'app-lang-switcher',  standalone: true,  template: `    <nav>      @for (locale of locales; track locale.code) {        <a          [href]="'/' + locale.code + currentPath()"          [class.active]="locale.code === currentLocale"          [lang]="locale.code"        >          {{ locale.label }}        </a>      }    </nav>  `,})export class LangSwitcherComponent {  private router = inject(Router);
  locales = [    { code: 'en-US', label: 'English' },    { code: 'fr', label: 'Français' },    { code: 'de', label: 'Deutsch' },  ];
  currentLocale = $localize.locale ?? 'en-US';
  currentPath = toSignal(    this.router.events.pipe(      filter(e => e instanceof NavigationEnd),      map((e: NavigationEnd) => e.url),    ),    { initialValue: this.router.url }  );}

<!-- Renders differently per locale --><p>{{ orderDate | date:'longDate' }}</p><!-- en-US: "June 26, 2026" --><!-- fr:    "26 juin 2026" --><!-- de:    "26. Juni 2026" -->
<p>{{ price | currency }}</p><!-- en-US: "$1,299.99" --><!-- fr:    "1 299,99 €"  (if currency is EUR) --><!-- de:    "1.299,99 €" -->
<p>{{ ratio | percent:'1.1-2' }}</p><!-- en-US: "73.5%" --><!-- de:    "73,5 %" (note space before %) -->

// angular.json — fail the build on missing translations"build": {  "options": {    "i18nMissingTranslation": "error"    // "error" | "warning" | "ignore"  }}

<!-- ❌ No custom ID — content change orphans translations --><h1 i18n>Hello, {{ name }}!</h1>
<!-- ✅ Custom ID — stable across content changes --><h1 i18n="@@greeting-header">Hello, {{ name }}!</h1>

# ❌ Error — dev server can't serve multiple locales simultaneouslyng serve   # with "localize": true in angular.json options
# ✅ Specify one locale for developmentng serve --localize fr
# ✅ Or test multi-locale with a production buildng build --localize && npx http-server dist/my-app

// ❌ Unnamed — translator sees "INTERPOLATION" and "INTERPOLATION_1"$localize`Hello ${firstName}, you have ${count} messages.`;
// ✅ Named — translator sees "firstName" and "messageCount"$localize`Hello ${firstName}:firstName:, you have ${count}:messageCount: messages.`;

# ❌ Only builds source locale — French/German bundles not generatedng build
# ✅ Builds all configured localesng build --localize
# ✅ Or set localize: true in the build configuration# angular.json: "configurations": { "production": { "localize": true } }ng build --configuration=production