Localize an Angular app and Publish it with Scully

We want to create a localized Angular App and then publish it with Scully. The first hurdle was the localization of the Angular App. In particular, we want to extract the translations and merge them with the already translated phrases.

xliffmerge comes in handy for this. You can install it with the ngx-i18nsupport package.

The first part of the series covers the localization of the Angular app.

There is an example repository.

Localize the Angular

Localize your Angular app using the offical Angular.io Docs:
https://angular.io/guide/i18n

ng add @angular/localize

Edit the angular.json file.

{
  ...
  "projects": {
    "<project-name>": {
      "i18n": {
        "sourceLocale": "de",
        "locales": {
          "en": "src/locales/messages.en.xlf"
        }
      }
      "architect": {
        "build": {
          ...
          "configurations": {
            "production": { 
              ... 
              "localize": true,
              ...
            },
            "de": {
              "localize": ["de"]
            },
            "en": {
              "localize": ["en"]
            }
          }
        },
        "serve": {
          ...
          "configurations": {
            ...
            "de": {
              "browserTarget": "<package-name>:build:de"
            },
            "en": {
              "browserTarget": "<package-name>:build:en"
            }
          }
        }
      }
    }
  },
  ...
}

We add German as the default language (messages.xlf) and English as the second translated language (messages.en.xlf). Don't forget to add the localize flag to the production configuration. Otherwise you will have to specify the flag on each build.

Extract and subsequent merge of messages file

npm install ngx-i18nsupport

Add the following scripts to package.json

{
   ...
   "scripts": {
     ...
     "extract-i18n": "ng xi18n <project-name> --output-path src/locales && xliffmerge",
     "xliffmerge": "./node_modules/ngx-i18nsupport/dist/xliffmerge"
   },
   "xliffmergeOptions": {
        "srcDir": "src/locales",
        "genDir": "src/locales",
        "defaultLanguage": "de",
        "languages": [
            "en"
        ]
    },
   ...
}

Extract and translate the strings

You can now extract the strings with npm run extract-i18n.
It will generate two files using the above configuration:

• src/locales/messages.xlf
• src/locales/messages.en.xlf

We are using poedit to edit our strings and therefore added a npm script:

"translate-en": "poedit src/locales/messages.en.xlf",

Run the Angular App in English

ng serve --configuration=en

Build the Angular App

ng build --prod

Builds the app for both languages dist/<project-name>/<language>

What's next

We want to use Scully to build the website statically for both languages. It was not easy but I think we did it. This will be the next part of the series.