How to add internationalization (i18n)

Adding i18n to an app

Like in manifest.json files, i18n values can be accessed via ${<i18n-key>} expressions in the app.json file of the nls/bundle.js like this:

<app>/nls/bundle.js sample

export default {
  root : {
    "mykey" : "Test",
    "map" : {
      "bundleName" : "New Map Bundle Name"
    }
  },
  de: true
}

So ${mykey} can be used directly in the app.json file to introduce the i18n value of the key.

app.json i18n keys

{
  ...,

  "bundles" : {
    "mybundle": {
      "MyComponent":{
        "windowTitle": "${mykey}"
      }
    }
  }
}

Overwriting bundle i18n values

To overwrite an i18n value used in a bundle, put the keys that should be overwritten into a "<bundlename>" property, like "map" in the preceding sample. The general structure looks like the following:

<app>/nls/bundle.js - patching bundle i18n keys

export default {
  root : {
    "<bundlename>" : {
      "<original i18nKey in bundle>" : "<new value>"
    },
    ...
  },
  de: true
}

This means, you can overwrite any i18n key used in a bundle. This way you can bring i18n support for additional languages to the application.

If you are using "umlauts" or any other special characters that are not part of the ASCII charset, ensure that the resource files (*.js, *.json, *.html) are using the UTF-8 character set or you use Unicode escapes (\uXXXX), like:

ä = \u00E4

ö = \u00F6

ü = \u00FC

…

You can use http://0xcc.net/jsescape/ to find the correct Unicode escape sequence for your character.