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.

Transcript

1. Piotr Lewandowski
2. INTERNATIONALIZATION I18N LOCALIZATION L10N
3. Localization Adapting product to region-desired „look and feel” ‍ Translator responsibility
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>
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
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
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' });
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
35. ✅
36. ✅ // tslint.json "i18n": [ true, "check-id", "check-text" ] * Requires codelyzer Optional, depending on your translation strategy
37. ✅ <h1> Angular i18n is cool </h1>
38. ✅ <h1 i18n="@@article.header"> Angular i18n is cool </h1>
39. ✅
40. // package.json "scripts": { "build": "ng build && ng xi18n" },
41. <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
42. <div> <div> Angular i18n is cool </div> </div> <article> <h1 i18n="@@article.header"> Angular i18n is cool </h1> <p i18n="@@article.content"> ... </p> </article>
43. <div> <div> Angular i18n is cool </div> </div> <article i18n="@@article"> <h1> Angular i18n is cool </h1> <p> ... </p> </article>
46. Angular i18n: » Docs » Plans for v6 and v7 General: » On i18n and l10n » i18nGuy - Guidelines
47. Localization platforms: » Pootle » Transifex » POEditor » TextUnited Editors & scripts: » Virtaal » tiny ng-translator » ngx-i18nsupport (xliff merge)
48. Piotr Lewandowski THANK YOU DZIĘKUJĘ 谢谢