i18n (Internalization) on Angular [AOT Mode]
Angular have a built in mechanism for i18n (internalization) in AOT mode and on JIT mode.
In this post i will talk about the AOT mode, cause AOT will be the default mechanism in the near Angular future.
u can read in more depth in the official documentation
Do u want that your Angular application will have a multi language support?
The answer is absolutely YES.
Its can be a product requirement, ease reading for your application client, or any other reason.
What u need to do to implement it?
just upgrade to Angular 4 and u have a built in i18n mechanism. pretty easy ahhh :)
How to use i18n?
This is the interesting part.
1. add i18n attribute with your custom id via @@ perfix on to your element
<div i18n=”@@appTitle”>Hello World></div>
2. use xi18n tool by angular-cli to generate your language file (Xliff or XMB file type)
— messages.xlf or messages.xmb file created in your target location
— commit this file to your git or any other source control
— example 1 : cmd -> your project -> ng xi18n
— example 2: ng xi18n — out-file=locale/messages.en.xlf — i18nFormat=xlf — local en
Note: The tool have several option, u can see them in this link (PUT LINK)
3. Send the messages file to your translator
- Tip for translator: use dedicated editors for edit XMB/xliff files
4. Get translation and:
Test the file:
- ng serve — locale en — i18n-file src/locale/messages.en.xlf — i18n-format xlf — aot
-ng build — locale en — i18n-file src/locale/messages.en.xlf — i18n-format xlf — aot
- Note: commit the translated messages file (xlif or xmb) to your git. Be careful with the merge and see that u merge the correct translation!
5. go this process again from step 1
Limitation and planing
- currently there is just Workaround to use i18n on component logic (outside of template)
— open issue in github
- here is the i18n future plane
- github i18n example application
- there is new command in your package.json related to xi18n, please see them
Hope it will help you on your i18n journey :)