DEV Community

fonlow
fonlow

Posted on

Batch Processing of Translation Resource for Angular Apps

#i18n #angular #googlecloud #agile

Introduction

You have been developing SPA using Angular 2+, and familiar with i18n with Angular.

Typically, the production build outputs such multiple deployment images for each locale:

Production Build for locales

And the build retrieves the translated XLIFF files:

Translation Resources

Different software shops may have different collaboration workflows of handling localization/translation. If you are a full-stack developer working in a small shop, likely you will the one who proceeds the machine translation, before involving human translators.

There are wide variety of tools available to automate the machine translation as much as possible, most of them are with interactive GUI. If you prefer CLI and batch processing for the sake of Continuous Integration, you may be interested in using GoogleTranslateXliff introduced in this article.

Continuous Integration with Machine Translation

Write Codes and Test with Development Build

Most of the time during coding, you would be using the development build in a default language.

Update Translation Resource Files

Once you (your team) feel confident of making a release, you update, add or merge the translation resource files through this command:

ng extract-i18n

By default, all the new translation units are with state "new" (XLIFF 1.2) or "initial" (XLIFF 2.0).

As of Angular 19, it is better to update this command with ng-extract-i18n-merge which can merge the updates well.

The .angular.json file should have the following:

        "extract-i18n": {
            "builder": "ng-extract-i18n-merge:ng-extract-i18n-merge",
            "options": {
    "buildTarget": "myng:build",
    "format": "xlf",
    "outputPath": "src/locales",
    "targetFiles": [
        "messages.zh-hans.xlf",
        "messages.zh-hant.xlf",
        "messages.ja.xlf",
        "messages.th.xlf",
        "messages.es.xlf",
        "messages.pt.xlf",
        "messages.fr.xlf",
        "messages.hi.xlf"
    ],
Enter fullscreen mode Exit fullscreen mode

References:

Translate Using Google Translate API v2 or v3

Prerequisites:

  • You have Google Cloud API account, and have acquired API Key for Google Translate v2 or client secret for v3.
  • You have GoogleTranslateStrings.exe installed in your dev PC. The build scripts for Windows, MacOS and Linux are located in the app code folder for any of the stable releases, presumably you know how to build DotNet programs on Linux or MacOS.

Run this to translate the Spanish resource file:

GoogleTranslateXliff.exe /AK=YourGoogleTranslateV2ApiKey /F=messages.es.xlf
Enter fullscreen mode Exit fullscreen mode

By default, the CLI app will translate those units with state "new" or "initial" only, and then mark the state as "translated".

For multiple locales, it is reasonable to have a shell script to automate further, and this PowerShell script could be a starting point:

$commandPath='C:/Green/GoogleTranslateXliff/GoogleTranslateXliff.exe'
$apiKey='MyGoogleTranslateV2ApiKey'

foreach ($lang in 'es', 'fr', 'hi', 'ja', 'pt', 'th', 'zh-hans', 'zh-hant'){
    $cmd='$commandPath /AK=$apiKey /B /F=messages.$lang.xlf'
    Invoke-Expression $ExecutionContext.InvokeCommand.ExpandString($cmd)
}
Enter fullscreen mode Exit fullscreen mode

Optionally you may involve some human translators to review and finalize the translations and mark those units "signed-off" or "final".

Hints:

Production Build of Angular App

Typically you may run something like:

ng build --configuration=production
Enter fullscreen mode Exit fullscreen mode

Next Release Cycle

For the sake of Agile Software Development, likely you will produce frequent releases, daily, weekly, fortnightly or monthly. Hopefully this CLI tool along with some PowerShell scripts may reduce the operation overhead and make the CI smoother.

Top comments (0)