We’ve been dealing with Angular l10n and i18n for quite a while now. We’ve compiled a list of best libraries for Angular i18n and even described how to localize Angular apps with ngx-translate or by using a built-in i18n module. If you’re familiar with i18next though and don’t want to switch to any other framework – we can’t blame you – there is an option to integrate it to your Angular project with the help of a community-maintained plugin.
This article will guide through the Angular l10n process with i18next and show you how to:
- Create a new Angular project using the latest version
- Integrate the i18next module into the app
- Set a default locale and switch to another locale
- Handle translation files
- Use the Phrase command line interface (CLI) for syncing our translations with the cloud and improving our workflow
By the way, all the code shown in this tutorial is also hosted on GitHub. Let’s get started!
Get Ready for Angular l10n: Create a New Angular 7 Project
First of all, navigate to the Angular Quickstart Page and install Node.js, Angular-cli and create a new application. Let’s name it “my-i18n-app”. Answer “yes” to add routing and choose your preferred CSS methods.
Next, we need to hook up the i18next library with the use of the angular-i18next provider.
Let’s install those libraries…
Modify our app.module.ts to integrate and initialize the i18next config:
Here, we just import the i18next library and run it on appInit lifecycle hook. That way, Angular wouldn’t load until i18next initialize event fired. By default, we handle English and Greek translations.
Now update the app.component.html to interpolate the i18next tag for translating the content.
If we run the application now, we’ll notice that the message is not shown at all. Instead, it prints the key string.
The reason for that is that we haven’t created and referenced any translation strings for the i18next library to search. Let’s do that now.
Setting and Switching Locales
In order to load translations to our app, we need to install a backend plugin. In addition, we’d like to have a locale switcher based on a few parameters like a cookie or an URL parameter so we need another plugin that would handle that for us.
Install the following plugins:
We need the i18next-xhr-backend to load the translations from a file using Ajax and the i18next-browser-languagedetector to detect the current user locale base on some options we specify.
Now we need to enable them in our appInit. Update the app.module section.
Notice that we used the following loadPath:
This is the path that we’ll have for our locale data. Let’s create that folder now and add the missing translations.
If we run the application again and pass the right parameters, we will see the correct message:
It would be nice if we had a dropdown that we could use to switch locale. Let’s do that now:
First, let’s create our header component that will host the language dropdown…
Add the contents of the dropdown:
Then add the code for the changeLanguage handler:
We use the i18NextService to subscribe for initialised events and update the current state. On changeLanguage event we change the current locale and reload our current location. Before we run the application again, we need to make sure we register this component at the app.module.ts
Finally, add the component to the app.component.html and run the app
Using Phrase Library Integrations to Handle Translation Files
Currently, as we’re not using the built-in i18n module that the framework provides, we need to be careful with managing the localization files. A lot of things can go wrong and ideally we need a library that will manage all of our translation projects and be in sync with any updates from external translators.
For that, we can use the Phrase CLI to integrate an advanced translation management system in our app and solve those issues. The process is as easy as one, two, three:
Before we interact with the API, we need to configure our client. Run the following command in your local shell:
The <token> parameter is needed, and you can create one from your Account > Access Tokens. Once generated, enter in the input and you’ll be asked to select a project from the list or you can create a new one…
Next, you will be asked to specify the default language file formats that we are going to use for that project and their location. Select number 38 for i18next:
The next question requests the location of our locales. Enter the static folder path we used before:
Once we’ve finished with the configuration, we can pull the latest locales in our local environment and inspect our uploaded locales in the Phrase Dashboard:
We can also pull or sync the remote translations into our local project in one command:
Now, if you inspect the contents of the file, you’ll see the downloaded translations, for example, the en.translation.json will contain the following:
Now the process of translating content for our Angular applications can become more streamlined and agile.
Angular is a mature platform for developing first-class single-page applications. In terms of internationalization and localization, it has a built-in module and offers the option to integrate a custom solution such as i18next. This tutorial explained the steps required to use this popular plugin and showed how we can improve our workflow by using Phrase for managing our translations.
I hope you enjoyed this article. Stay tuned for more content related to those amazing technologies.