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 "Supported languages".

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

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

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

{
  "WELCOME": "Willkommen"
}

Auto translate not translated strings

dfx-translate will take partially manual translated files into account, meaning it will only translate strings which weren't translated. Sadly you will need a LibreTranlsate instance or access to one for this feature to work. More at Auto deep learning translation

Registration in root (app) module

This has to be done only once in your project. Please keep following infromation in mind.

• The defaultLanguage property should be the same as your primary language.
• There should not be an auto generated language file for your default / primary language.

Use code values for the following properties from "Supported languages"

property	description	default value
defaultLanguage	Short name of default language	en
useLocalStorage	Save selected languages as the preference into local storage	true

import {DfxTranslateModule} from "dfx-translate";

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

Switch language

Language switching is as easy as one function call. Just pass a code from "Supported languages"

import {TranslateService} from "dfx-translate";

@Component({
  selector: 'app-example',
  templateUrl: ...,
  styleUrls: [...],
})
export class ExampleComponent {
  constructor(private translator: TranslateService) {
  }

  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

import {DfxTranslateModule} from "dfx-translate";

@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 {TranslateService} from "dfx-translate";

@Component({
  selector: 'app-example',
  templateUrl: ...,
  styleUrls: [...],
})
export class ExampleComponent {
  constructor(private translator: TranslateService) {
  }

  save() {
    window.alert(this.translator.translate('WELCOME'));
  }
}

Auto deep learning translation

It's possible to translate not manual translated strings via LibreTranslate API. LibreTranslate is an open source selfhostable machine-translation service. Visit https://github.com/LibreTranslate/LibreTranslate for more information.

dfx-translate will take partially manual translated files into account. The command syntax is

node ./node_modules/dfx-translate/translation/generateTranslation.js {API_URL} {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 en de
 node ./node_modules/dfx-translate/translation/generateTranslation.js https://translate.abc.abc/translate en fr
 node ./node_modules/dfx-translate/translation/generateTranslation.js https://translate.abc.abc/translate en es
 node ./node_modules/dfx-translate/translation/generateTranslation.js https://translate.abc.abc/translate en it
 node ./node_modules/dfx-translate/translation/generateTranslation.js https://translate.abc.abc/translate en pt

 # If you have any prettier library intstalled, execute it here
 # 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