TECH Insights

Viden og indsigter fra IT Minds' it-talenter

Localization in Angular with Crowdin and DevOps

Skrevet af Mindster og Software Developer hos IT Minds on 24-04-20 12:54
Mindster og Software Developer hos IT Minds

It's not uncommon for projects to require localization at some point. Setting up and using localization over time, including translation management, can become a tedious and time-consuming task if not done properly.

This post will dig into the localization setup needed for Angular and how to integrate Crowdin and DevOps to automate as many boring tasks as possible.

  • DevOps is Microsofts DevOps services
  • Crowdin is an online localization tool to manage translations

The POC project

The project we want to enable localization for, is a simple Angular 9.1 solution. It contains one component with some sample text.

The gist of enabling localization in Angular is to ng add @angular/localize and utilize the i18n-tag. This enables the Angular tooling to extract and create translation source files.

The angular.json-file can then be extended for our project to include our localization setup regarding what locales that should be supported. In combination with this, we can add two npm tasks to simply localization support.

Screenshot 2020-04-24 at 12.44.57

Screenshot 2020-04-24 at 12.45.26

The localize tasks builds and extracts any strings in our application that supports localization using the Angular CLI command xi18n. It uses our setup from our angular.json-file. In this case, it extracts text with the expectation of it being en-US and places it in the file src/locale/messages.xlf.

The build command with the --locale argument builds our application and outputs a compiled application for each locale defined. Metadata such as the <base>-tag and i18nLocale is automatically applied, which reduces the need to create customized build configurations for each supported locale in most cases - required in previous Angular versions.

Screenshot 2020-04-24 at 12.46.07

Crowdin integration

The setup for Crowdin is somewhat straight forward. Within integrations, we can enable Azure Repos and setup our branch target and configuration. This creates a crowdin.yml-file in our repository with the given translation targets.


Screenshot 2020-04-24 at 12.47.26

Screenshot 2020-04-24 at 12.48.40

Screenshot 2020-04-24 at 12.49.10

At this point, our strings is now ready to be translated in the Crowdin portal.

Screenshot 2020-04-24 at 12.49.49

Crowdin automatically detects when new translations has been created. It then creates a pull-request with the updated translations ready to be merged.

Screenshot 2020-04-24 at 12.50.34

Screenshot 2020-04-24 at 12.51.15

The result

Our translation is handled by Crowdin and automatic synchronization has been enabled between our repository and Crowdin. To serve our different locales locally, we need to add locale-specific configuration targets in our angular.json-file.

Screenshot 2020-04-24 at 12.51.54

We can now start a local instance of our application. The -c argument specifies our target configuration. Our port defaults to 4200 for our setup, so to run multiple instances, we need to specify a free port.

Screenshot 2020-04-24 at 12.52.32

Screenshot 2020-04-24 at 12.52.59

Future of Angular localization

A much wanted feature for Angular is to add native support for localization in component/TS code. We're getting closer and closer. According to an issue on GitHub, the support can be expected to land with the release of Angular 10... Fingers crossed - until then, we can add our translation definitions in template code using the i18n-tag and apply the same id across to map at compile-time.

The syntax will utilize the $localize command. Support for the command itself is already added with the ng add @angular/localize import.

This boils down to a syntax looking like the following with the i18n ID explicitly defined.

title = $localize`:@@title:Localization demo`;

Insights fra de bedste softwaretalenter

En del af IT Minds’ DNA er, at vi spotter og tiltrækker de bedste softwaretalenter, som er stærke i de nyeste teknologier og frameworks. Derfor vil vi gerne dele ud af vores viden og erfaringer vores konsulenter opsamler, når de afprøver og arbejder med nye teknologier og frameworks.

Seneste indlæg