Angular Translations
Rafał Brzoska
Future Processing / Bottega IT Minds
https://twitter.com/rafal_brzoska
Rafał Brzoska
Senior Software Developer
Angular Trainer
Agenda
- Why about translations? :-)
- Angular i18n vs ngx-translate vs custom
- Design
- Translations format and loading
- Service
- Pipes and directives
- Lazy Loading (webpack)
- Other Ideas
Problems with translations
Angular i18n
- XLIFF
- Pluralization, placeholders
- Separate App for each Language
- ONLY in templates
- No runtime changes
- Different setup for JIT / AoT
- Difficult development flow
ngx-translate
vs
- JSON
- Pluralization, placeholders
- Lot of bundling options
- Template AND in-code translations
- Runtime language changes
- Uncertain future of library (support, upgrades)
Custom
Everything is in your hands :)
Design Requirements
- Angular Module/Library
- JSON support
- Translation service
- Translation pipe
- Translation directive
- Lazy loading (webpack)
- Context/placeholders
- Fallback and warnings
- more and more and more....
Service
- Load translations
- Append new translations
- Get/Set current language snapshot/stream
- Translate
Pipe
- Translate keys
- Memoize
- Impure
- React ( :D ) on language change
Directive
- Translate keys
- Replace inner text
- Add titles etc
Lazy loading
- Separate translations chunk vs build with module
- Dynamic imports (ES2018)
- Webpack import options (webpackChunkName, webpackMode)
Placeholders
- Replace placeholders with variables
- Use Mustache or other templating engines
Other ideas
- Caching
- XLIFF support
- Translations generator
- Connect with online translations API (eg. google, bing)
- Manual change detection
Thank You!