Skip to content

Including a new language

Jump to bottom Edit New page
Guilherme Borges Bastos edited this page Jun 7, 2020 · 5 revisions

< Applying Customizations page

This Wiki page will lead you through the steps of adding support for additional languages. Currently, the Live Resume is internationalized in en-US and pt-BR. In case of issues, feel free to enter in our community on Gitter and post your questions.

Introduction to i18n

The Live Resume uses Angular's internationalization (i18n) tools for making the application available in multiple languages. Prior to move on to the topics below, it's recommended to read the i18n documentation.

How to use it?

The built-in i18n functionality extracts from the template the elements containing the i18n attributes, e.g: i18n, i18n-title, i18n-placeholder, etc...

<article>
  <h1 i18n="index@@hello">Hello</h1>
</article>

By adding those attributes, the content will be extracted and internationalized. In order to extract the contents for translation, execute the following command:

npm run int:extract

Then, open up the messages.xlf file and you'll see the contents extracted. For each item that needs translating (i.e. has the i18n directive), a trans-unit will be created:

<trans-unit id="48a16ab522feaff81571155668deb1a4304291f4" datatype="html">
  <source>Hello</source>
  <context-group purpose="location">
    <context context-type="sourcefile">app/app.component.html</context>
    <context context-type="linenumber">3</context>
  </context-group>
</trans-unit>

Copy all the extracted <trans-unit> from messages.xlf into the specific location file(s), e.g: messages.pt.xlf. After that, add a target attribute for each item, which is equal to the translation in that language:

<body>
  <trans-unit id="index" datatype="html">
    <source>Hello</source>
    <target>Olá</target>
    <context-group purpose="location">
      <context context-type="sourcefile">app/app.component.html</context>
      <context context-type="linenumber">3</context>
    </context-group>
  </trans-unit>
</body>

Locale builds

The Live Resume uses the Angular CLI to generate specific builds for each locale that we want to support.

Head over to angular.json and inside of the build settings, there are the configurations for each supported language. By default, the Live resume supports en-USand pt-BR.

For more information how to add more language support, read the following posts:

LinkedIn | GitHub | Facebook | Community Support Gitter

Clone this wiki locally