Contents
Which is the base translation file in i18n?
This is the base translation file with the following contents: trans-unit is the tag containing a single translation. id is a translation identifier and has a special meaning. xi18n generates the id for us so do not modify it here! We will discuss this attribute later in more detail.
How to perform translation extraction in angular i18n?
To deal with these attributes, provide the i18n-ATTRIBUTE_NAME attributes in the following way: Perform translation extraction as usual by running: Copy new trans-unit tags from the src/i18n/messages.xlf file into src/i18n/messages.ru.xlf and provide target like so:
How is the i18n module used in angular?
The Angular I18n module allows us to translate both tag content and attributes. Suppose there is a link to your portfolio in the src/app/app.component.html: The link text will be translated properly, but what about the title and href?
How to use i18n to perform translations in angular?
Let’s see it in action by replacing src/app/app.component.html content with the following: i18n is a special attribute that is recognized by the localize package. During the compilation it will be removed, and the tag content will be replaced with the proper translations. This attribute may accept a translation description such as this:
Is the i18n attribute part of the compiled code?
It is interpreted at build-time and is not part of the compiled code. Although it might look like one, the i18n attribute is not an angular directive! For the translator to provide accurate translations, a description and the context of the text inside of the application can be required.
How to add i18n attribute to HTML element?
Actually, it is very simple. All we need to do is to add the i18n attribute to the HTML-element. Notice that we still provide a default value for the text to appear. This will be the text for the default version of our application. In most cases, that will be English. Also note, that the i18n attribute is just a regular HTML attribute.
How to get started with I18N in angular?
In this article you will learn how to get started with Angular I18n using the built-in internationalization module. We will cover the following topics: Setting up the Angular application and configuring the built-in localize module. Performing simple translations and providing additional translation data. Extracting translations to XLF files.
Can you use i18n as a translation token?
But since the ngc will replace all i18n with the correct translation we can’t leverage it. Can’t find any exposed options/properties that contains the parsed translations from ngc. We could use the same dynamic approach as for JIT by fetching the xlt file that way still provide it on the TRANSLATION token.
Which is the best translation editor for vue-i18n?
BabelEdit is the translation editor for your vue-i18n project. See all translations at the same time. Save hours of editing JSON or VUE files. Easy data exchange with translation agencies. To use a translation use the $t () function with a translation id as parameter: You can of course add parameters to your translation texts:
Is the documentation of Vue i18n self-contained?
This is what the documentation of vue-i18n uses in its examples. The advantage is that the examples are self-contained in one file. Thats nice for a simple example — but it’s a nightmare when it comes to real projects especially if you work with a translator. Those guys are quite unhappy with editing js source code — believe me!