Topics In Demand
Notification
New

No notification found.

How to Internationalize Your Angular App (i18n)?
How to Internationalize Your Angular App (i18n)?

October 28, 2022

155

0

We all are aware of how time-consuming the process of translation can be. What if there was a solution to reduce the extra effort needed when developing a product in multiple languages and make internationalization easier?

In Angular, such a solution exists — in the form of a module — that can be leveraged when developing an application to be used in multiple languages or locales.

What is Internationalization?

Internationalization can be defined as the process of developing a software application in multiple languages without making any code changes. Internationalization is usually used with localization. This translates your application into one or more specific language(s) to enhance it for specific locales.

Angular offers multiple ways to ensure your software can deal with multiple languages, including its built-in i18n functionality.

This module will help convert our project into different languages in this blog. It is a lightweight module and supports plain node.js apps.

How to Use Angular’s i18n Module?

To begin with, we first install the i18n module. We do this with this command:

-npm install i18n — save

Next, we configure a file for i8n. We can do this in angular.json. In configurations, we define many things like output path, i18n file, i18n locale, etc.

We then mark all the static messages in our templates with the i18n module for translation. Let’s assume we have the message below. To wrap it with the i18n module, we use the code below:

In the case of HTML files, we execute this as:

Graphical user interface, text, logo

Description automatically generated

Now, for translations, we can also define id or message along with the i18n attribute. This should be unique for unique messages. If we do not assign an id by default, a unique id is assigned instead.

Make sure that the id for different messages is different. When we translate, only the first message assigned to an id is extracted.

In the case of attributes translation, an attribute in the form of i18n-x is added. Here ‘x’ defines the attribute. In other words, it is the attribute that we want to translate. For example, if I want to translate a title, I can place it as shown below:

When we have implemented this in our application, we need to create a translation source file. To extract the messages marked with i18n, we execute the command ng xi18n.

This command will create a message.xlf file, which will have all messages that mention i18n. We can change the name, format of our file, and location of the extracted file.

For example, if we want to create our file in the src/locale folder, we can run the ng xi18n –output-path src/locale command to do so.

We can run the command below to specify the format of our file:

ng xi18n –format=xlf

>> Now that we have all our messages in one file (which we want to translate), the next step is to generate a translation file for any language we want.

For this, we need to copy our message.xlf file and rename it in a way that makes it easy to identify the language it is created for since we can have multiple translation files. For example, message.ja.xlf for Japanese.

Now here comes the role of the translator, which would translate our messages. The goal is to replace the original message with the translated message. This file is written in the following format:

Text

Description automatically generated

Now, implementation is complete. To run our application with translated text, we compile our application with the translated file (For this, we need to specify the path in angular.json in our configuration).

In case we have missed any translation, our project is compiled along with warnings.

Conclusion

We hope these insights on the use of i18n helps you understand how easy it is to develop software application with multiple languages. And now, instead of thinking of how to approach the development of an application in various other languages, we can use this module and make configurations in one go.

Author — Anshul Gupta, DLT Labs

About the Author: Anshul is a software engineering practitioner with experience in Node.js development.

 


That the contents of third-party articles/blogs published here on the website, and the interpretation of all information in the article/blogs such as data, maps, numbers, opinions etc. displayed in the article/blogs and views or the opinions expressed within the content are solely of the author's; and do not reflect the opinions and beliefs of NASSCOM or its affiliates in any manner. NASSCOM does not take any liability w.r.t. content in any manner and will not be liable in any manner whatsoever for any kind of liability arising out of any act, error or omission. The contents of third-party article/blogs published, are provided solely as convenience; and the presence of these articles/blogs should not, under any circumstances, be considered as an endorsement of the contents by NASSCOM in any manner; and if you chose to access these articles/blogs , you do so at your own risk.


DLT Labs™ is a global leader in the development and delivery of enterprise blockchain technologies and solutions, as well as a pioneer in the creation and implementation of standards for application development. With a deep track record in innovation and one of the world's largest pools of highly experienced blockchain experts, DLT Labs™ enables the transformation and innovation of complex multi-stakeholder processes.

© Copyright nasscom. All Rights Reserved.