Localize an Angular App
Tags: angular, scully
Published: 2020-11-09 22:25:34

#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](https://github.com/martinroob/ngx-i18nsupport) package.

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

There is an [example repository](https://gitlab.com/novaloop-oss/angular/localization).

## 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](https://poedit.net/) 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.