i18n draft

i18n

i18n for strings in templates

Prerequisites

• Ensure that you have tsconfig.ngx-i18n.json (example file https://github.com/zowe/zos-subsystems/blob/master/webClient/tsconfig.ngx-i18n.json)
• Ensure that you have xliffmerge.json (example file https://github.com/zowe/zos-subsystems/blob/master/webClient/xliffmerge.json)
• Package.json scripts section "i18n": "ng-xi18n -p tsconfig.ngx-i18n.json --i18nFormat=xlf --outFile=messages.xlf && xliffmerge -p xliffmerge.json",

i18n steps

• Add i18n attribute to every string in template that needs to be translated. Always add message id (e.g. @@introduction-header). Refer https://angular.io/guide/i18n for details (pluralization, ICU expressions, etc.)

<h1 i18n="site header|An introduction header for this sample@@introduction-header">Hello i18n!</h1>

• Run npm run i18n command
• Translate xlf files in src/assets/i18n folder

i18n for strings in TypeScript files

Prerequisites

• Ensure that you have in devDependencies section in package.json: "angular-l10n": "~5.2.0" angular-l10n is used
• In main TS module configure Angular-l10n translation module(see https://github.com/zowe/zos-subsystems/blob/master/webClient/src/app/subsystems-root.module.ts)

 imports: [
 TranslationModule.forRoot({
      translation: {
        providers: [],
        composedLanguage: [ISOCode.Language, ISOCode.Country]
      }}
    ),
  ]
// ...
export class AppModule {
  constructor(
    private l10nLoader: L10nLoader,
    @Inject(Angular2InjectionTokens.L10N_CONFIG) private l10nConfig: Angular2L10nConfig,
    @Inject(LOCALE_CONFIG) private localeConfig: LocaleConfig,
    @Inject(TRANSLATION_CONFIG) private translationConfig: TranslationConfig,

  ) {
    this.localeConfig.defaultLocale = this.l10nConfig.defaultLocale;
    this.translationConfig.providers = this.l10nConfig.providers;
    this.l10nLoader.load();
  }
}

• Inject TranslationService in the component where you need it(see https://robisim74.github.io/angular-l10n/quick-start/ for more details)

some.component.ts

constructor(private translation: TranslationService)

• Use the service for translation, e.g.:

this.message = this.translation.translate('MyMessage');

• Add message.LANG.json(or message.LANG-COUNTRY.json) files under src/assets/i18n. Note that message.en.json is used when a trasnlation files for a given language is not found. message.fr.json

{
  "MyMessage": "Salut"
}

i18n for plugin definitions

• Put pluginDefinition.LANG.json(or pluginDefinition.LANG-COUNTRY.json) files under src/assets/i18n folder. Keys must be the same as in your pluginDefinition.json. Example: pluginDefinition.json

{
  "identifier": "org.zowe.zossystem.subsystems",
  "apiVersion": "1.0.0",
  "pluginVersion": "0.9.4",
  "pluginType": "application",
  "webContent": {
    "framework": "angular2",
    "launchDefinition": {
      "pluginShortNameKey": "ZOS Subsystems",
      "pluginShortNameDefault": "ZOS Subsystems",
      "imageSrc": "assets/subsystems.png"
    },
    "descriptionKey": "ZOSSubystemsDescription",
    "descriptionDefault": "ZOS Subsystems Plugin",
  }
}

pluginDefinition.fr.json

{
  "ZOS Subsystems": "Sous-systèmes de zOS",
  "ZOSSubystemsDescription": "Sous-systèmes de zOS"
}

• Restart zlux-proxy-server