Introduction

localization in angular

In this blog, we will learn how to make our Localization Angular app which will be accessible in different languages using i18n tools and internationalization. We will create an Angular application and construct it to serve the content in Two different languages like English, Hindi & much more. We will also deploy our app to Github.io and see how localization works in real-time.

We will use the Angular 8 and Visual Studio Code(VS Code) to develop our application.

Take a look at the application output.

Localisation Using i18nLocalisation Using i18n

Source Code

You can get the source code for this application from GitHub. The code text file has been updated to Angular 8.

What is i18n?

I18n, also known as internationalization is the procedure of making our app backing various languages to extend the reach to a worldwide audience.

What is Internationalization?

Internationalization is that the process of creating a software application in a sequence that it are often adapted to varied languages and regions externally engineering changes.

What is Localization?

Localization is the process of adapting internationalized software for a selected region or language by translating text and adding locale-specific components.

Creating an Angular 8 app

The primary step is to create an Angular 8 app. If you're new Angular, I might suggest you read my article Getting Started With Angular 8.0 to accumulate the way to setup an Angular development environment in your machine.

Run the following command to create the app.

ng new TechInfotainment

Open the TechInfotainment app using VS code.

Setting up the app component

Open app.component.html file. Swap the already existing code with the following code.
</h1>
<h3 i18n="@@myName">
  Hello, My name is TechInfotainment
</h3>
<p>This text wont change & it will remain same in all languages</p>
<hr />
You can detect that we have marked <h1> and <h3> tags with i18n attribute. This is a way to tell the Angular to deliberate this text as translatable content. We will explore i18n characteristics in detail in the next section.

Generating a translation source file

Run the following command in the CLI to generate a translation source file.
ng xi18n --output-path translate
It will produce a folder called to translate and generate a messages.xlf file inside it. Open the file and you can see the subsequent XML code inside it. 
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="3f2feb6d5fb690628177afa3ade2519db69ba838" datatype="html">
        <source>Localization Demo in Angular using i18n</source>
        <context-group purpose="location">
          <context context-type="sourcefile">app/app.component.html</context>
          <context context-type="linenumber">1</context>
        </context-group>
      </trans-unit>
      <trans-unit id="myName" datatype="html">
        <source>Hello, My name is Tech Infotainment</source>
        <context-group purpose="location">
          <context context-type="sourcefile">app/app.component.html</context>
          <context context-type="linenumber">5</context>
        </context-group>
      </trans-unit>
    </body>
  </file>
</xliff>
This file encompasses a list of <trans-unit> tags. These tags will have all the content that was marked for translation by means of the i18n attribute. You can also perceive that each <trans-unit> tag has an id property related to it. This unique id will be engendered by default for each tag that was marked with i18n attribute. We can also modify the id by provided that a name prefixed with @@ as we have done with <h3> tag in the previous section. Hence, the id for <h3> tag is “myName” as we defined it. There is no access for the <p> tag in translation file because we have not marked it with i18n characteristic. Angular translation tool will not consider it for conversions.

If you alteration the text for any tag in your HTML file, you need to redevelop the translation file. Regenerating the file will override the default id of <trans-unit> tags. Hence, it is desirable to provide custom ids to each translatable tag to continue reliability.

Hence, we have successfully employed i18n in our app. In the next section, we will extend it to make it offered to different languages.

Translating the content

We will translate our application from English to Hindi and vice-versa. Make two copies of the messages.xlf file and rename them to messages.en.xlf, messages.es.xlf. These file names can be customized as per your prime but the extension should be .xlf.

This is the same content as the original messages.xlf file, but we have added a <target> tag consistent to each <source> tag. The <target> tag contains the translated text for the content inside the <source> tag. Here I am using Google translate for the conversion but in real-time applications, a language expert will decode the contents from messages.xlf file.

Similarly, open the messages.es.xlf and put in the following content in it.
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="3f2feb6d5fb690628177afa3ade2519db69ba838" datatype="html">
        <source>Localization Demo in Angular using i18n</source>
        <target>I18n का उपयोग कर कोणीय में स्थानीयकरण डेमो</target>
        <context-group purpose="location">
          <context context-type="sourcefile">app/app.component.html</context>
          <context context-type="linenumber">1</context>
        </context-group>
      </trans-unit>
      <trans-unit id="myName" datatype="html">
        <source>Hello, My name is Ankit</source>
        <target>हेलो, मेरा नाम टेक इन्फोटेनमेंट है</target>
        <context-group purpose="location">
          <context context-type="sourcefile">app/app.component.html</context>
          <context context-type="linenumber">5</context>
        </context-group>
      </trans-unit>
    </body>
  </file>
</xliff>
Finally, we will make the English translation file. Open messages.en.xlf and put in the following content in it. 
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="3f2feb6d5fb690628177afa3ade2519db69ba838" datatype="html">
        <source>Localization Demo in Angular using i18n</source>
        <target>Localization Demo in Angular using i18n</target>
        <context-group purpose="location">
          <context context-type="sourcefile">app/app.component.html</context>
          <context context-type="linenumber">1</context>
        </context-group>
      </trans-unit>
      <trans-unit id="myName" datatype="html">
        <source>Hello, My name is Tech Infotainment</source>
        <target>Hello, My name is Tech Infotainment</target>
        <context-group purpose="location">
          <context context-type="sourcefile">app/app.component.html</context>
          <context context-type="linenumber">5</context>
        </context-group>
      </trans-unit>
    </body>
  </file>
</xliff>

Configure the app to serve in multiple languages

Open angular.json file and add the following configuration.
"build": {
  ...
  "configurations": {
    ...
    "es": {
      "aot": true,
      "i18nFile": "src/translate/messages.es.xlf",
      "i18nFormat": "xlf",
      "i18nLocale": "es",
      "i18nMissingTranslation": "error"
    }
  }
},
"serve": {
  ...
  "configurations": {
    ...
    "es": {
      "browserTarget": "i18nDemo:build:es"
    }
  }
}

Here we have added the configuration for the Hindi language. We have on condition that the path and format for i18n file and set the locale to “es”. When we execute the application, app content will be attended from the i18n file path provided. Similarly, you can add configuration for other languages.

Execution Demo

Once you have combined the configuration for all the languages in the angular.json file, run the subsequent command to start the server.

ng serve --configuration=es

This will launch the application in “es” configuration and our app will show the Hindi language translations.

Refer to the output screen as shown below:
Internationalization-Angular-Tech-infotainment
The formations that we have defined will only help the application to run in the local machine. We cannot change the configuration once the application is launched & running.

An app production will need the app to serve different languages just by changing the URL. e.g. yourwebsite.com/es will provide the Hindi version of site and yourwebsite.com/en will provide the English version. In this circumstance, the application will be served from unalike virtual directories for different languages. We will reconnoiter how to do this in the next segment.

Modify the app component for production

Open app.component.ts and put in the following code.
import { Component, LOCALE_ID, Inject } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'i18nDemo';
  languageList = [
    { code: 'en', label: 'English' },
    { code: 'es', label: 'हिंदी' },
  ];
  constructor(@Inject(LOCALE_ID) protected localeId: string) { }
}

Here we have well-defined a list of languages and its locale code. These locale codes are standard codes. You can effortlessly get a list of languages and the consistent locale code by a simple Google translation search.

Script to compile the app for production

We need to have two diverse serving locations for three different languages. To build the app package for one language for production we will use the following command:
ng build --prod --i18n-locale es --i18n-format xlf --i18n-file src/translate/messages.es.xlf --output-path=dist/es --baseHref /es/

Let us recognize this command. We on condition that the locale id for the package, which is “es” for Hindi. We also give the i18n file path and format. The output path belongings are required to provide the location for an application package. The baseHref assets specify the base URL from which this package will be assisted.

We need to run this command for every single language we will provide by changing the i18n file path and baseHref characteristic values. However, this will be an unwieldy task if we have a lot of languages. Therefore, we will write a script to generate a suite for all languages. Open package.json file and add the subsequent scripts inside the “scripts” section.
"build-locale:en": "ng build --prod --i18n-locale en --i18n-format xlf --i18n-file src/translate/messages.en.xlf --output-path=dist/en --baseHref /en/",
"build-locale:es": "ng build --prod --i18n-locale es --i18n-format xlf --i18n-file src/translate/messages.es.xlf --output-path=dist/es --baseHref /es/",
"build-locale": "npm run build-locale:en && npm run build-locale:es && npm run build-locale:hi"

Here we have created two scripts for two different languages we are using. The “build-locale” script will implement all of them at once. All these scripts are key-value pairs. The key names we are using here are customizable and you can use any term of your choice. To create the submission package for all the language, run the following command: 
npm run build-locale

On fruitful execution, it will generate a “dist” folder in the application’s root folder. The dist folder has two sub-folders to serve our application in two different languages. 

 Refer to the image shown below:

Angular-LocalizationDeploying the application on Github.io

We will deploy this application on Github.io to see the language change in real-time. Refer to my article Hosting A Git Application on Github.io and follow the steps mentioned to deploy this Angular app on Github.

Once the application is deployed, you will get the hosting URL. Open the URL and append the baseHref attribute as we defined earlier, to the URL. Hence, the URL will be yoursite.com/es/ for the Hindi language and so on.

The application I will be hosting will be in English Language only in the future video I’ll Deploy this project with firebase where we will see the real-time change by using the click of a button, which we built here, is hosted at https://techinfotainment.github.io/Angular-i18n-Localization-Internationalization/. If you open this URL, you will see the output as shown below:
Angular-Localization
Click on the links provided. The URL will change and the application will reload in a new language.

Conclusion

We Implemented our internationalize Angular 8 application using i18n tools. We also applied localization to Angular application. Localization permits us to serve our app in many different language forms which we have used two of them you can compile on your own and can create more such stuff, which helps in encompassing the reach to a worldwide audience. We erudite how localization works in a production setting by deploying our application on Github.io.
Get the source code from GitHub and Learn by yourself all kind of modification are welcome you can also pull this repository and modify on your own around for a better understanding.
Thank you!!!