dfx-translate

dfx-translate

A simple translate package for Angular 4 - 12.

Usage

Installation

npm install dfx-translate@latest

Language file setup

All of your language files are going to be stored in src/assets/i18n/ folder. If there is no one in your project, create one. Depending on which primary language you want to write your application you can pick from [one of those](#Supported languages).

Lets say you've picked english as your primary language, create an en.json file with following content:

{
  "WELCOME": "Welcome",
  "WELCOME_SUBTEXT": "strange."
}

Now you want to translate Welcome into german. Create a de.json file with the content:

{
  "WELCOME": "Willkommen"
}

Not translated properties can be auto translated with an Libre Translation Deep Learning API.

Registration in root (app) module

This has to be done only once.

Use code values for the following properties [as seen here](#Supported languages)

property	description
defaultLanguage	Short name of default language
autoGeneratedDefaultLanguage	Short name of default language for auto generated languages

@NgModule({
  declarations: [...],
  imports: [
    ...
    DfxTranslateModule.config({configuration: { defaultLanguage: 'de', autoGeneratedDefaultLanguage: 'en' }})
  ],
  providers: [...],
  bootstrap: [...]
})
export class AppModule { }

Switch language

Language switching is as easy as one function call. Just pass [one of those codes](#Supported languages)

import {TranslatorService} from "dfx-translate";

@Component({
  selector: 'app-example',
  templateUrl: ...,
  styleUrls: [...],
})
export class ExampleComponent {
  constructor(private translator: TranslatorService) { }
  
  setLang(lang: string) {
    this.translator.use(lang);
  }
}

Pipeline usage

If you want to use the tranlsation pipe you have to import the DfxTranslateModule into your used module

@NgModule({
  declarations: [...],
  imports: [
    ...
    DfxTranslateModule,
    ...
  ],
  exports: [...]
})
export class ExampleModule {}

After that you can simple use the tr pipe in html

<h1>{{'WELCOME' | tr}}</h1>
<span>{{'WELCOME_SUBTEXT' | tr}}</span>

Service usage

It's also easily possible to access translations via code with the TranslatorService:

import {TranslatorService} from "dfx-translate";

@Component({
  selector: 'app-example',
  templateUrl: ...,
  styleUrls: [...],
})
export class ExampleComponent {
  constructor(private translator: TranslatorService) { }
  
  save() {
    window.alert(this.translator.translate('WELCOME'));
  }
}

Auto deep learning translation

It's possible to translate not manual translated strings via LibreTranslates Deep Learning API. dfx-translate will take partially manual translated files into account.

The command syntax is

node ./node_modules/dfx-translate/translation/generateTranslation.js {API_URL} {PRIMARY_LANGUAGE_FILE} {SOURCE_LANGUAGE_CODE} {TARGET_LANGUAGE_CODE}

For simplicity purposes I wrote a little shell script. Put this at the top / root level of your project in languages.sh

#!/usr/bin/env bash
main () {
 node ./node_modules/dfx-translate/translation/generateTranslation.js https://translate.abc.abc/translate ./src/assets/i18n/en.json en de
 node ./node_modules/dfx-translate/translation/generateTranslation.js https://translate.abc.abc/translate ./src/assets/i18n/en.json en fr
 node ./node_modules/dfx-translate/translation/generateTranslation.js https://translate.abc.abc/translate ./src/assets/i18n/en.json en es
 node ./node_modules/dfx-translate/translation/generateTranslation.js https://translate.abc.abc/translate ./src/assets/i18n/en.json en it
 node ./node_modules/dfx-translate/translation/generateTranslation.js https://translate.abc.abc/translate ./src/assets/i18n/en.json en pt

 # If you have prettier installed uncomment this line
 # prettier --config ./.prettierrc --write ./src/assets/i18n

 printf "\nFinished!"
}
time main

dfx-translate will put all auto generated properties in src/assets/i18n/. The file names will be something like de_auto.json or en_auto.json.

Before an production build run

Supported languages

code	name
en	English
ar	Arabic
zh	Chinese
fr	French
de	German
hi	Hindi
ga	Irish
it	Italian
ja	Japanese
ko	Korean
pt	Portuguese
ru	Russian
es	Spanish