internationalization

Cumulocity Internationalization (i18n) Skill

Overview

Cumulocity Web SDK uses the gettext .po file format for translations. There are two distinct problems to solve:

1. Annotating & pushing text through the translation pipeline in source code
2. Providing the translated strings via .po files and wiring them into the app

This skill covers both, plus the complete workflow for adding a brand-new language.

---

Built-in Languages

The @c8y/ngx-components package ships ready-made .po files for these locales:

Code	Language
de	German
en	English
en_US	English (US)
es	Spanish
fr	French
ja_JP	Japanese
ko	Korean
nl	Dutch
pl	Polish
pt_BR	Brazilian Portuguese
zh_CN	Simplified Chinese
zh_TW	Traditional Chinese

To activate any of these, only Steps 5 and 6 of the "Adding a New Language" section below are required — no translation work needed.

---

Step 1 — Annotating Text in Source Code

Four mechanisms are available. They can be combined freely.

gettext(string)

Annotates a static string literal for extraction. Does not translate at runtime — use it to mark strings defined in TypeScript that are translated elsewhere (e.g. via pipe or TranslateService).

import { gettext } from '@c8y/ngx-components';

const label = gettext('Remove Device');

Rules:

• Must be a string literal — not a variable or template literal.
• ✅ gettext('Remove Device')
• ❌ gettext(myVar)
• ❌ gettext(`Remove ${condition ? 'Device' : 'Group'}`)

translate Pipe

Translates the string at runtime inside templates. When applied to a static string literal it also annotates it for extraction — no separate gettext() call needed.

<!-- Simple -->
{{ 'Device' | translate }}

<!-- With interpolated placeholders — use @let to pre-resolve -->
@let removeLabel = 'Remove Device' | translate;
@let cancelLabel = 'Cancel' | translate;
{{ confirmed ? removeLabel : cancelLabel }}

<!-- Or expose gettext on the component class and use it inline -->
{{ (confirmed ? gettext('Remove Device') : gettext('Cancel')) | translate }}