Internationalization with @angular/localize

Internationalization with @angular/localize

Tags: i18n, angular

Transcript

1. Marcell Kiss, 2023 Demystifying n14s Angular holds your back @marcelltech
2. Intro Marcell Kiss, MSc 
 Senior Software Engineer, Architect @marcelltech @marcellkiss @marcellkiss marcell.tech Contractor #EnterpriseArchitecture Organizer of Angular Hungary 🇩🇪 🇭🇺 Trainer at Angular Architects
3. Goal of the talk ✅ Give a high level overview ✅ Show implementation details ✅ Give con f idence to execute @marcelltech
4. The Mental Model of i18n @marcelltech • What is i18n? • Di ff erent approches • The process of translation
5. Single version for all @marcelltech Application
6. Customised versions for target markets @marcelltech Application
7. What is i18n? @marcelltech Translations Formatting Content
8. Translations @marcelltech Hello World in grey Hello World in grey Hello World in gray Olá mundo em cinza
9. Formatting @marcelltech 9999.999 9,999.999 9,999.999 9.999,999 new Date(‘2023-12-31’) 31 Dec 2024, 01:00:00 Dec 31, 2024, 1:00:00 AM 31 de dez. de 2024 01:00:00
10. What is locale? @marcelltech “ parameters that de f ine the user's language and region {language}-{region}
11. @marcelltech Multi-country language en-GB 
 en-US 
 en-AU 
 en-CA Multi language country de-CH 
 fr-CH 
 it-CH Locale examples
12. JSON JSON Localize Runtime @marcelltech Application e.g.: ngx-translate, transloco
13. Application Application Localize Build Time @marcelltech Application e.g.: @angular/localize
14. Runtime vs Build Time Comparison @marcelltech Runtime Build Time Performance ✅ SEO compatibility ✅ SSR compatibility ✅ Build time ✅ Change language without reload ✅
15. The process @marcelltech
16. Angular i18n • Install @angular/localize • Add i18n attributes • Extract terms SIMPLIFIED @marcelltech
17. Step 1. Install npm install @angular/localize @marcelltech
18. Step 2. Add i18n attribute @marcelltech
19. Step 3. Extract terms ng extract-i18n @marcelltech
20. The result ./messages.xlf @marcelltech
21. Angular i18n • Prepare .html + .ts f iles • Extract terms • Setup con f ig • Get translations • Build localized apps • Deploy & host? COMPLETE @marcelltech
22. Handle variables with $localize @marcelltech
23. Add $localize to the main.ts @marcelltech
24. ./messages.xlf @marcelltech
25. Metadata in .html @marcelltech
26. ./messages.xlf @marcelltech
27. Metadata in .ts @marcelltech
28. Con f ig i18n @marcelltech
29. ICU expressions Intro @marcelltech { 
 component_property, // angular variable 
 icu_clause, // ‘plural’ or ‘select’ 
 case_statements // conditional terms 
 }
30. ICU expressions Intro @marcelltech
31. ICU expressions .xlf @marcelltech
32. ICU expressions vs the old way @marcelltech
33. XLF editor featuring poeditor.com @marcelltech
34. @marcelltech XLF editor Manual translations
35. @marcelltech XLF editor Automatic translations
36. @marcelltech Build localized apps ng build --localize
37. @marcelltech Build speed is quick… Building a multi library nx app With 1.000+ terms Raw size of ~1MB main.js + several lazy-loaded packages ~58.9ms and ~64.1 ms nx run my-app:build --localize --skip-nx-cache
38. Deploy and host the new structure @marcelltech
39. Deploy and host the new structure @marcelltech
40. Summary • De f inition of i18n • De f inition of locale • Implementation approaches • The process overview • Usage of @angular/localize • i18n in .html & $localize in .ts • Extract terms • Translate terms • Build localized apps • Deployment & hosting What we learned @marcelltech
41. Duration: 2-3 hours Level: intermediate Subscribe at marcell.tech/i18n @marcelltech Bonus mini workshop
42. Marcell Kiss, 2023 Questions and Answers Thanks for listening! marcell.tech @marcelltech @marcellkiss @marcellkiss
43. Resources - [OSS] Nx Angular i18n Example on GitHub 
 https://github.com/marcellkiss/nx-angular-i18n-example - [OSS] Practice locales on Stackblitz 
 https://stackblitz.com/edit/stackblitz-starters-g1gkjb? f ile=src%2Fmain.ts - [Docs] O ff icial Angular Documentation 
 https://angular.io/guide/i18n-overview - [Resource] ISO Language Codes 
 https://www.andiamo.co.uk/resources/iso-language-codes/ - [Images] Images used for the slides 
 https://unsplash.com/, https://pexels.com/ 
 
 @marcelltech