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

Angular Wrocław - Internationalisation

Angular Wrocław - Internationalisation

Current state and the future

Video (pl): https://youtu.be/ArLCFuKVdGk?t=133

Piotr Lewandowski

January 31, 2019

More Decks by Piotr Lewandowski

Other Decks in Programming


  1. <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>
  2. ICU EXPRESSIONS <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
  3. ID GENERATION <h1 i18n="@@topbar.header"> Angular is cool </h1> <h1 i18n>

    Angular is cool </h1> Custom ID Generated ID hash Content changes = ID changes Never changes
  4. PROCESS Mark HTML with i18n attributes Extract messages from HTML

    to XLIFF Copy & translate XLIFF Generate new app version for each language Outside Angular
  5. MULTIPLE BUNDLES ! Currently... Everything at build time with AOT

    Duplicated builds for each locale " Desired... ONE bundle for all locales Translating before application bootstraps
  6. MULTIPLE BUNDLES ! On the roadmap since 2.0 " Planned

    for Ivy compiler # Already in master since June 2018 STATUS
  7. DURING COMPILATION... <h2 i18n="User profile@@page.header"> Hello, Gdańsk! </h2> interface I18nDef

    { value: 'Hello, Gdańsk!'; id?: 'page.header'; meaning?: undefined; description?: 'User profile'; }
  8. MULTIPLE BUNDLES PR #24037 205 review comments J OVERVIEW Loading

    BEFORE Angular bootstraps All locales in ONE bundle Choose: AOT or RunTime
  9. IN-CODE TRANSLATIONS ! Planned with Ivy compiler " Work in

    progress # Polyfill already exists @ngx-translate/i18n-polyfill STATUS
  10. Enable i18n TSLint rule // tslint.json "i18n": [ true, "check-id",

    "check-text" ] * Requires codelyzer Optional, depending on your translation strategy
  11. NESTED I18N <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
  12. NESTED I18N <div> <div> Angular i18n is cool </div> </div>

    ! <article> <h1 i18n="@@article.header"> Angular i18n is cool </h1> <p i18n="@@article.content"> ... </p> </article>
  13. NESTED I18N <div> <div> Angular i18n is cool </div> </div>

    ! <article i18n="@@article"> <h1> Angular i18n is cool </h1> <p> ... </p> </article>
  14. RESOURCES Angular i18n: » Docs » Plans for v6 and

    v7 General: » On i18n and l10n » i18nGuy - Guidelines
  15. TOOLS & EDITORS Localization platforms: » Pootle » Transifex »

    POEditor » TextUnited Editors & scripts: » Virtaal » tiny ng-translator » ngx-i18nsupport (xliff merge)