Internationalization, often written as i18n, is the process through which products can be prepared to be taken to other countries. It doesn\u2019t just mean being able to change languages; instead it means being to accept different forms of data, different settings to match local customs and different strings of data and process it correctly.<\/p>\n\n\n\n
These days, with so many websites to choose from, making applications available and user-friendly to a worldwide audience is important. In this article, we will focus on using the built-in i18n tool<\/a> in Angular. So, let’s get started.<\/p>\n\n\n\n Angular’s default locale is set to To be able to translate the context in the application, we first need to mark the text with a custom attribute, named Let’s add the <\/p>\n\n\n\n i18n is a custom attribute, recognized by Angular tools and compilers. After translation, the compiler removes it. It is not an Angular directive. <\/strong><\/p>\n Now, we need a After adding this script, go ahead and run For each We can provide more information about the translations using this structure by adding a Additionally, we can help the translator with a We can also set a custom id for persistence and maintenance. aber all these are optional. <\/p>\n\n\n\n We can finally generate our translations<\/strong>.<\/p>\n\n\n\n At this point, we have a Let’s start with Now, we have different versions of our application. A good practice is to have a Head over to Let’s create some more scripts inside the package.json file to be able to build and serve our new locales.<\/p>\n\n\n\n It’s time to see what we have created.<\/p>\n\n\n\n Internationalization and localization are important parts of an application. We can use New Angular Project<\/h4>\n\n\n\n
\n# Install Angular CLI globally\nnpm install --global @angular\/cli\n# Create Angular project\nng new ng-internationalization\n# Would you like to add Angular routing? N\n# Which stylesheet format would you like to use? SCSS\n# Go to project's directory\ncd ng-internationalization\n# Open this folder with your favourite editor\ncode . \n# Serve the application\nng serve -o\n<\/code><\/pre>\n\n\n\nTranslations<\/h4>\n\n\n\n
en-US<\/code>. To support more languages, we need to update the default configuration and add additional locales. You can find a list of various locale codes here<\/a>. <\/p>\n\n\n\nText Marking<\/h4>\n\n\n\n
i18n<\/code>. After the text marking, we will be able to translate the application into our desire languages. In our case el-GR<\/code> and fr-FR<\/code>. I will be using Google Translate to translate the text into French.<\/p>\n\n\n\ni18n<\/code> attribute to all of the text that we want to translate<\/p>\n\n\n\n<main>\n <section>\n <h1 i18n>Why is Internationalization so important?<\/h1>\n <p i18n>\n These days, with so many websites to choose from, making applications\n available and user-friendly to a worldwide audience is important. It's the\n move to make a better user experience.\n <\/p>\n <small i18n\n >Find the full article\n <a\n href=\"https:\/\/github.com\/ThPadelis\/ng-internationalization\"\n target=\"_blank\"\n >here<\/a\n ><\/small\n >\n <\/section>\n<\/main><\/code><\/pre>\n\n\n\n
\n
\n\n\n\nscript<\/code> that uses the Angular CLI<\/a> to extract this into a messages.xlf<\/code> file. This file contains all of our marked items. Head over to packages.json<\/code> and add this script<\/p>\n\n\n\n\"scripts\": {\n \"i18n:extract\": \"ng xi18n --output-path src\/locales\"\n}<\/code><\/pre>\n\n\n\nnpm run i18n:extract<\/code>. Then, open up scr\/locales\/messages.xlf<\/code> and you will see something like this<\/p>\n\n\n\n<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\n<xliff version=\"1.2\" xmlns=\"urn:oasis:names:tc:xliff:document:1.2\">\n <file source-language=\"en\" datatype=\"plaintext\" original=\"ng2.template\">\n <body>\n <trans-unit id=\"4bcef995bebcf205074f9fd756b822a488b452cc\" datatype=\"html\">\n <source>Why is Internationalization so important?<\/source>\n <context-group purpose=\"location\">\n <context context-type=\"sourcefile\">src\/app\/app.component.html<\/context>\n <context context-type=\"linenumber\">3<\/context>\n <\/context-group>\n <\/trans-unit>\n <trans-unit id=\"e8db4c58a5fc95a2a8d80183e4b527f4480fa06e\" datatype=\"html\">\n <source>\n These days, with so many websites to choose from, making applications\n available and user-friendly to a worldwide audience is important. It's the\n move to make a better user experience.\n <\/source>\n <context-group purpose=\"location\">\n <context context-type=\"sourcefile\">src\/app\/app.component.html<\/context>\n <context context-type=\"linenumber\">4<\/context>\n <\/context-group>\n <\/trans-unit>\n <trans-unit id=\"0f16c7aaa76d2f52dbabcd329ebf11a39a26918d\" datatype=\"html\">\n <source>Find the full article\n <x id=\"START_LINK\" ctype=\"x-a\" equiv-text=\"<a>\"\/>here<x id=\"CLOSE_LINK\" ctype=\"x-a\" equiv-text=\"<\/a>\"\/><\/source>\n <context-group purpose=\"location\">\n <context context-type=\"sourcefile\">src\/app\/app.component.html<\/context>\n <context context-type=\"linenumber\">10<\/context>\n <\/context-group>\n <\/trans-unit>\n <\/body>\n <\/file>\n<\/xliff><\/code><\/pre>\n\n\n\nhtml<\/code> element marked with the i18n<\/code> directive, a trans-unit<\/code> will be created.<\/p>\n\n\n\n<trans-unit id=\"4bcef995bebcf205074f9fd756b822a488b452cc\" datatype=\"html\">\n <source>Why is Internationalization so important?<\/source>\n <context-group purpose=\"location\">\n <context context-type=\"sourcefile\">src\/app\/app.component.html<\/context>\n <context context-type=\"linenumber\">3<\/context>\n <\/context-group>\n<\/trans-unit><\/code><\/pre>\n\n\n\ndescription<\/code>. Inside of app.component.hmtl<\/code>, update the i18n<\/code> items with a description.<\/p>\n\n\n\ndescription<\/code> and a meaning<\/code> .<\/p>\n\n\n\n<!-- i18n=\"<meanin>|<description>@@customId\" -->\n<h1 i18n=\"Article Heading|Title for the article@@articleHeading\">\n Why is Internationalization so important?\n<\/h1><\/code><\/pre>\n\n\n\n\nnpm run i18n:extract<\/code><\/pre>\n\n\n\nTranslations<\/h4>\n\n\n\n
messages.xlf<\/code> file that contains all of the items that we want to translate. Let’s create a copy of messages.xlf<\/code> for each language we want to translate the application.<\/p>\n\n\n\ncp src\\locales\\messages.xlf src\\locales\\messages.fr.xlf\ncp src\\locales\\messages.xlf src\\locales\\messages.el.xlf<\/code><\/pre>\n\n\n\nmessages.fr.xlf<\/code>. We will translate the messages by using the target<\/code> and source<\/code>. The target<\/code> attribute is the translation in that language.<\/p>\n\n\n\n\n<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\n<xliff version=\"1.2\" xmlns=\"urn:oasis:names:tc:xliff:document:1.2\">\n <file source-language=\"en\" datatype=\"plaintext\" original=\"ng2.template\">\n <body>\n <trans-unit id=\"articleHeading\" datatype=\"html\">\n <source>Why is Internationalization so important?<\/source>\n <target>Pourquoi l'internationalisation est-elle si importante?<\/target>\n <context-group purpose=\"location\">\n <context context-type=\"sourcefile\">src\/app\/app.component.html<\/context>\n <context context-type=\"linenumber\">3<\/context>\n <\/context-group>\n <note priority=\"1\" from=\"description\">Title for the article<\/note>\n <note priority=\"1\" from=\"meaning\">Article Heading<\/note>\n <\/trans-unit>\n <trans-unit id=\"articleDescription\" datatype=\"html\">\n <source>These days, with so many websites to choose from, making applications available and user-friendly to a worldwide audience is important. It's the move to make a better user experience.<\/source>\n <target>Ces jours-ci, avec autant de sites Web \u00e0 choisir, il est important de rendre les applications disponibles et conviviales pour un public mondial. C'est le geste d'am\u00e9liorer l'exp\u00e9rience utilisateur.<\/target>\n <context-group purpose=\"location\">\n <context context-type=\"sourcefile\">src\/app\/app.component.html<\/context>\n <context context-type=\"linenumber\">8<\/context>\n <\/context-group>\n <note priority=\"1\" from=\"description\">Description for the article<\/note>\n <note priority=\"1\" from=\"meaning\">Article Description<\/note>\n <\/trans-unit>\n <trans-unit id=\"fullArticle\" datatype=\"html\">\n <source>Find the full article <x id=\"START_LINK\" ctype=\"x-a\" equiv-text=\"<a>\"\/>here<x id=\"CLOSE_LINK\" ctype=\"x-a\" equiv-text=\"<\/a>\"\/><\/source>\n <target>Retrouvez l'article complet <x id=\"START_LINK\" ctype=\"x-a\" equiv-text=\"<a>\"\/>ici<x id=\"CLOSE_LINK\" ctype=\"x-a\" equiv-text=\"<\/a>\"\/><\/target>\n <context-group purpose=\"location\">\n <context context-type=\"sourcefile\">src\/app\/app.component.html<\/context>\n <context context-type=\"linenumber\">14<\/context>\n <\/context-group>\n <note priority=\"1\" from=\"description\">Read the whole article<\/note>\n <note priority=\"1\" from=\"meaning\">Full Article<\/note>\n <\/trans-unit>\n <\/body>\n <\/file>\n<\/xliff><\/code><\/pre>\n\n\n\nLocale Build Configuration<\/h3>\n\n\n\n
script<\/code> that builds the application for each locale we want to support.<\/p>\n\n\n\nangular.json<\/code> and add the below configurations.<\/p>\n\n\n\n{\n \"projects\": {\n \"ng-internationalization\": {\n \"architect\": {\n \"build\": {\n \"configurations\": {\n \"fr-FR\": {\n \"aot\": true,\n \"outputPath\": \"dist\/fr-FR\",\n \"i18nFile\": \"src\/locales\/messages.fr.xlf\",\n \"i18nFormat\": \"xlf\",\n \"i18nLocale\": \"fr\",\n \"i18nMissingTranslation\": \"error\"\n },\n \"el-GR\": {\n \"aot\": true,\n \"outputPath\": \"dist\/el-GR\",\n \"i18nFile\": \"src\/locales\/messages.el.xlf\",\n \"i18nFormat\": \"xlf\",\n \"i18nLocale\": \"el-GR\",\n \"i18nMissingTranslation\": \"error\"\n }\n }\n },\n \"serve\": {\n \"configurations\": {\n \"production\": {\n \"browserTarget\": \"ng-internationalization:build:production\"\n },\n \"fr-FR\": {\n \"browserTarget\": \"ng-internationalization:build:fr-FR\"\n },\n \"el-GR\": {\n \"browserTarget\": \"ng-internationalization:build:el-GR\"\n }\n }\n }\n }\n }\n }\n}<\/code><\/pre>\n\n\n\n\"scripts\": {\n \"start\": \"ng serve\",\n \"start:fr\": \"ng serve --configuration=fr-FR\",\n \"start:gr\": \"ng serve --configuration=el-GR\",\n \"build\": \"ng build\",\n \"build:fr\": \"ng build --configuration=fr-FR\",\n \"build:gr\": \"ng build --configuration=el-GR\",\n}<\/code><\/pre>\n\n\n\n\nnpm run start\nnpm run start:fr -- --port 4201\nnpm run start:gr -- --port 4202<\/code><\/pre>\n\n\n\nConclusion<\/h4>\n\n\n\n
angular-cli<\/code> to support it or install an external library to save some time.<\/p>\n\n\n\nreference<\/h4>\n\n\n\n