i18n Key Patterns for Angular Applications

i18n Key Patterns for Angular

Angular offers multiple approaches to internationalization, each with different key structure requirements. The three main options are Angular's built-in i18n (compile-time), ngx-translate (runtime), and Transloco (runtime with modern features).

Angular Built-in i18n

Angular's built-in i18n uses XLIFF or XMB files with auto-generated IDs:

<h1 i18n="site title|The main heading@@homeTitle">Welcome to Our App</h1>
<p i18n="@@homeDescription">The best tool for developers</p>

Generated XLIFF:

<trans-unit id="homeTitle" datatype="html">
  <source>Welcome to Our App</source>
  <target></target>
  <note from="description">site title</note>
  <note from="meaning">The main heading</note>
</trans-unit>

Key structure: Custom IDs (@@homeTitle) or auto-generated hashes. Custom IDs are recommended for readability.

ngx-translate

ngx-translate uses runtime JSON files with dot-notation keys:

{
  "HOME": {
    "TITLE": "Welcome to Our App",
    "DESCRIPTION": "The best tool for developers",
    "CTA": "Get Started"
  },
  "COMMON": {
    "BUTTONS": {
      "SUBMIT": "Submit",
      "CANCEL": "Cancel"
    }
  }
}

Usage in templates:

<h1>{{ 'HOME.TITLE' | translate }}</h1>
<button>{{ 'COMMON.BUTTONS.SUBMIT' | translate }}</button>

Convention: ngx-translate projects commonly use SCREAMING_SNAKE_CASE for keys, though this is not required.

Transloco

Transloco is the modern alternative to ngx-translate:

{
  "home": {
    "title": "Welcome to Our App",
    "description": "The best tool for developers"
  },
  "common": {
    "buttons": {
      "submit": "Submit",
      "cancel": "Cancel"
    }
  }
}

Usage:

<ng-container *transloco="let t">
  <h1>{{ t('home.title') }}</h1>
  <button>{{ t('common.buttons.submit') }}</button>
</ng-container>

Transloco supports scope-based lazy loading:

@NgModule({
  providers: [
    { provide: TRANSLOCO_SCOPE, useValue: 'dashboard' }
  ]
})
export class DashboardModule {}

Angular-Specific Best Practices

1. Use custom IDs with built-in i18n -- auto-generated IDs break when source text changes
2. Prefer lowercase keys with Transloco -- matches modern JS/TS conventions
3. Lazy-load translation scopes per route module for performance
4. Use ICU MessageFormat for pluralization and gender -- Angular's built-in i18n supports it natively
5. Extract strings with ng extract-i18n for built-in i18n or transloco-keys-manager for Transloco

Comparison

Feature	Built-in i18n	ngx-translate	Transloco
Key format	XLIFF/XMB	JSON	JSON
Runtime/Compile	Compile	Runtime	Runtime
Lazy loading	N/A (compiled)	Manual	Built-in
Type safety	N/A	No	Plugin
Active maintenance	Yes	Low	Yes