Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular i18n - Current state and the future

Angular i18n - Current state and the future

Internationalization is a process of design and preparation application for easy adaptation to different region or culture.

This presentation is about how Angular Team approaches this problem and why we decided to go with official solution during adaptation to Chinese market even though official solution has few disadvantages.

I focus on official solution working during compile-time, sometimes comparing to libraries working in runtime.

Also, I present result of my research on current development process of this module, what we can expect in Angular 7 / 8.


Piotr Lewandowski

September 12, 2018


  1. Piotr Lewandowski


  3. Localization Adapting product to region-desired „look and feel” ‍ Translator

  4. None
  5. Internationalization Enables easy localization Developer responsibility

  6. Right to left Dates Currencies Grammar forms Temperature Numbers Legal

    Translation Plurals Symbols Units Sorting
  7. Dates Currencies Numbers Plurals Translation Grammar forms

  8. Translation templates Formatting pipes ICU expressions

  9. Re-use existing standards Don’t enforce process No rutime overhead

  10. <h1 i18n>Hello, {{ name }}!</h1> <img src="avatar.png" i18n-title title="It’s you!"

    /> <p i18n="UserModule|User Profile"> Last time seen at {{ lastVisited | date }} </p>
  11. None
  12. None
  13. <p>Alicja { count, plural, =0 { nie złapała Pokémona }

    one { złapała Pokémona } few { złapała {{count}} Pokémony } many { złapała {{count}} Pokémonów } other { złapała Pokémonów: {{count}} } }</p> Alicja złapała 5 Pokémonów count = 5
  14. <p>Brawo, { gender, select, male { złapałeś Pokémona } female

    { złapałaś Pokémona } other { Pokémon został złapany } }</p> Brawo, złapałeś Pokémona gender = ' male' '...'
  15. <trans-unit id="dfd67d0cbc87b3e8b89570c00031a4751cf4b76c" datatype="html"> <source>Hello, <x id="INTERPOLATION" equiv-text="{{name}}"/>!</source> <!-- ... stuff

    ... --> </trans-unit> <h1 i18n>Hello, {{name}}!</h1>
  16. <trans-unit id="dfd67d0cbc87b3e8b89570c00031a4751cf4b76c" datatype="html"> <source>Hello, <x id="INTERPOLATION" equiv-text="{{name}}"/>!</source> <!-- ... stuff

    ... --> </trans-unit> <h1 i18n>Hello, {{name}}!</h1>
  17. <h1 i18n="@@topbar.header"> Angular is cool </h1> <h1 i18n> Angular is

    cool </h1> Generated ID hash Content change = ID change Custom ID Never changes
  18. Mark HTML with i18n attributes Extract messages from HTML to

    XLIFF Copy & translate XLIFF Generate new app version for each language Outside Angular
  19. None
  20. None
  21. None
  22. Currently... Everything at build time with AOT Duplicated builds for

    each locale Desired... ONE bundle for all locales Translating before application bootstraps
  23. On the roadmap since 2.0 Planned for Angular 7 with

    Ivy compiler Already in master since June 2018
  24. interface I18nDef { value: string; id?: string; meaning?: string; description?:

    string; } <h2 i18n="User profile@@page.header"> Hello, Gdańsk! </h2> interface I18nDef { value: 'Hello, Gdańsk!'; id?: 'page.header'; meaning?: undefined; description?: 'User profile'; }
  25. PR #24037 205 review comments ☺ Loading BEFORE Angular bootstraps

    All locales in ONE bundle Choose: AOT or RunTime ❔ XLIFF has to be in JS bundle
  26. None
  27. Currently... Everything in HTML Desired... Translation in services

  28. Planned with Angular 7 with Ivy compiler Work in progress

    Polyfill already exists @ngx-translate/i18n-polyfill
  29. constructor(i18n: I18n) { this.message = i18n('Speaking at meetup in {{myVar}}

    !', { myVar: 'Gdańsk, Poland' });
  30. None
  31. Better docs Angular CLI support

  32. Localize single module Better library support See #14331

  33. Allow custom parsers, generators and loaders Possible JSON support

  34. None
  35. ✅ // tslint.json "i18n": [ true, "check-id", "check-text" ] *

    Requires codelyzer Optional, depending on your translation strategy
  36. ✅ <h1> Angular i18n is cool </h1>

  37. ✅ <h1 i18n="@@article.header"> Angular i18n is cool </h1>

  38. // package.json "scripts": { "build": "ng build && ng xi18n"

  39. <div> <div> Angular i18n is cool </div> </div> <article i18n>

    <h1 i18n="@@article.header"> Angular i18n is cool </h1> <p> ... </p> </article> Error: Could not mark an element as translatable inside a translatable section
  40. <div> <div> Angular i18n is cool </div> </div> <article> <h1

    i18n="@@article.header"> Angular i18n is cool </h1> <p i18n="@@article.content"> ... </p> </article>
  41. <div> <div> Angular i18n is cool </div> </div> <article i18n="@@article">

    <h1> Angular i18n is cool </h1> <p> ... </p> </article>
  42. None
  43. None
  44. Angular i18n: » Docs » Plans for v6 and v7

    General: » On i18n and l10n » i18nGuy - Guidelines
  45. Localization platforms: » Pootle » Transifex » POEditor » TextUnited

    Editors & scripts: » Virtaal » tiny ng-translator » ngx-i18nsupport (xliff merge)
  46. Piotr Lewandowski THANK YOU DZIĘKUJĘ 谢谢