Im trying to translate my app using the i18n official implementation of angular 2: https://angular.io/guide/i18n and im trying to translate some message with HTML inside (font awesome icons lets say).
For example this:
<p i18n="instagram-widget.instagram|Instagram name in the foot gallery @@instagramInstagramWidget"
class="text-muted text-center">
<i class="fa fa-instagram fa-lg mx-1" aria-hidden="true"></i>
Instagram
</p>
when i generate the translation file using either ng xi18n or ./node_modules/.bin/ng-xi18n i get the following translation unit.
<x id="START_ITALIC_TEXT" ctype="x-i"/><x id="CLOSE_ITALIC_TEXT" ctype="x-i"/> Instagram
i create a translation file for es locale and when i serve my app using the new locale the font awesome icon is missing, only shows the text instagram.
This problems happens with any nested HTML tags where the parent is being translated.
The problem was related to the translators i was using.
The translators remove the placeholder tags () and leave only the plain text, what i did is manually look over all the translations strings and add the placeholders where originally are.
Angular uses this placeholders to avoid translators modifying your HTML tags by mistake, in the translation process angular take this placeholders tags and replace it for the original tags in the view (https://github.com/angular/angular/issues/18302)
I cant find (yet) a translation tool that doesnt remove those placeholders