Multiple Language Support in Angular Application using i18n

5 min readNov 12, 2019

Hello Readers,

In this article, we will discuss about “how our angular application can support multiple languages”. But wait do our application really need translation or conversion to any other languages? Well the answer is Yes. Because if your application or website just in English then possibly you are missing out on a big audience. Below is the chart of languages by proportion of native speakers.

So, any time, if we heard a word multiple language support the first thing which comes in our mind is something called localization and internationalization. Right? People often used these two words interchangeably, but actually the are slightly differ in meaning.

Internationalization is the process of designing and preparing your app to be usable in different languages. Localization is the process of translating your internationalized app into specific languages for particular locales.

Internationalization deals with following aspects,

Displaying dates, number, percentages, and currencies in a local format.
Preparing text in component templates for translation.
Handling plural forms of words.
Handling alternative text.

Whereas Localization actually translate to actual text.

(Source: angular.io )

So now let’s start with an example, I had created the blank new application with angular cli. And changed my app.component.html as shown below,

Here I had used i18n on both h1 element and given two different ids. This will work as translator text from our translation file. So, we have to use i18n decorator to each and every element of our html which we want to translate to other languages.

Generating Translation File

We can generate the translation file using angular cli, below is the command

ng xi18n --output-path src\locale

in above command we can specify the path where we actually want to create translation file, below is the how generated file will look like,

Here in above file as you can see, for each of the id we set in our component for translation it will generate <trans-unit> tag. So, it has generated separate <trans-unit> tag for both welcome and sample text. So, now we can copy the messages.xlf and create as many translation files or language we want to support. Below is the translation for hindi and gujrati.

Messages.hi.xlf

Messages.gu.xlf

Lastly, we need to adjust some settings in angular.json file as shown in below,

Here is the overall angular.json file,

Run the Angular Application Locally

Finally, we can run the application using the below command,

ng serve --configuration=hi

ng serve --configuration=gu

ng serve

Real Challenges with production build

Now that is simple isn’t it? But the demo we had developed will work only for local machine. But what if we want to use the same demo in real application. Because once our application is deployed or live on server, we just cannot change its configurations. Well, there are certain ways by which we do the above said task, but my personal choice will be creating separate built for separate languages, say for example if someone want to run hindi version of my application then the path would be, www.xyz.com/hi and same case for other languages also.

So before deploying our application to the server let’s add 3 different languages button which we want to support.so modify app.component.html as shown below,

Here in above html we added 3 anchor tag, and we are simply appending path to its respected directory using href property of anchor tag.

That’s it we are all done and now its time for generate deployment build. We can generate a simple English build, which is a by default language using following command.

ng build --prod

this will generate our build deployment build inside the dist directory which we can then publish to our server.

So now again we have to generate a separate build for hindi and gujarati languages. We can do it by following commands,

ng build --prod --i18n-locale hi --i18n-format xlf --i18n-file src/locale/messages.hi.xlf --output-path=dist/hi --baseHref /hi/

so as you can see we are specifying i18n-locale parameter to hindi (hi), we are also providing the source file location and we are setting output directory where our build should be created to dist/hi and most important parameter baseHref from where we want to serve our local language angular application.

We can run the same command for other languages.

ng build --prod --i18n-locale gu --i18n-format xlf --i18n-file src/locale/messages.gu.xlf --output-path=dist/gu --baseHref /gu/

now our dist directory should look like this,

So now we are ready to deploy our application to github pages, but before deploying to github pages we must remove dist directory from .gitignore file.