Configure locales in app

de_DE.json
{
    "common": {
        "exampleKey": "Eine Beispielübersetzung"
    }
}
app.module.ts
import de_DE from "../i18n/de_DE.json";
import en_GB from "../i18n/en_GB.json";
import { i18nService } from 'ftui2';
// ...

@NgModule(
    // ...
)
export class AppModule {
    constructor(private i18n: i18nService) {
        this.i18n.init({
            de_DE: de_DE,
            en_GB: en_GB
        });
    }
}
demo.component.html
<div translate="app.common.exampleKey"></div>
<!-- or -->
<div>{{ 'app.common.exampleKey' | translate }}</div>
Many properties/inputs exposed by FTUI2 take i18n keys.
When translations are defined for an app, the i18nService automatically prepends app. to the keys to prevent conflicts. This prefix must not be set in the translation JSON files.

Configure locales in library

de_DE.json
{
    "common": {
        "exampleKey": "Eine Beispielübersetzung für eine Library"
    }
}
someLib.module.ts
import de_DE from "../i18n/de_DE.json";
import en_GB from "../i18n/en_GB.json";
import { i18nService } from 'ftui2';
// ...

@NgModule(
    // ...
)
export class SomeLibModule {
    constructor(private i18n: i18nService) {
        this.i18n.init({
            de_DE: de_DE,
            en_GB: en_GB
        }, 'someLib');
    }
}

The second parameter to init() is the prefix for the translations keys defined in the library.

demo.component.html — in lib consuming app!
<div translate="someLib.common.exampleKey"></div>
<!-- --> "Eine Beispielübersetzung für eine Library" -->

<div translate="app.common.exampleKey"></div>
<!-- --> "Eine Beispielübersetzung" -->

Switching locales

settingsMenu.component.ts
// ...

switchLang() {
    this.i18nService.setLocale(
        this.i18nService.locale === 'de_DE' ? 'en_GB' : 'de_DE'
    );
}

constructor(private i18nService: i18nService) { }

Allow Webpack deal with JSON

tsconfig.json (generally required settings omitted for brevity)
{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true
    }
}

An ECMAScript module needs to explicitly defines its exports and default export. But a JSON file has no awareness of a module system and when importing one, it exports its content by default. So we need to tell the compiler to let that slide.

Guidelines

  • Every translation file should be hierarchical structured, and should contain at least one category: common. The structure should reflect logical domains, like pages and widgets.

  • The leaves or keys of the translation tree should contain the type of label or text that it represents, e.g. errorNotification: {heading: '', body: '', buttonLabel: ''}

  • Default locale should be English, if the user’s locale isn’t available.

  • Translations keys are in English and use pascalCase.

Glossary

locale
A set of location specific configurations, like language, time format, currency, or typographic details like digit grouping.

translation tree
A hierarchical object that contains all available languages in its first layer. The following layers specify purpose or place of the translations. Its leaves are the translation keys.

translation key
The leaves of a translation tree. Every key is assigned to a string representing a translated phrase.