Resolve "internationalization"

Closes #160 (closed)

Proposed changes

• Add multi language support
• Add German and English language files

How to: Translation

This will be created as an own wiki page after this merge request was successfully merged.

In HTML

In HTML, replace any text with handlebars with the translate pipe. You can use this syntax inside a tag and inside placeholders etc.

The selector for the string has to be unique. Please follow these rules for the selector: <component-name>.<string-name>. Selectors have to stand in single quotes '

<button>{{ 'header.english' | translate }}</button>
<input type="password" placeholder="{{ 'login.password' | translate }}" name="password"/>

In Typescript

In Typescript, you can reach for any text string via the TranslateService.

First, you have to add the TranslateService to the constructor of the component: constructor(private translationService: TranslateService) {}. After making the translationService available, you can access the strings via this.translationService.get('<identifier>'). Please note that the TranslateService uses a http loader. Therefore, fetching translations is asynchronous and needs to be subscribed. An example can be found underneath.

constructor (private notificationService: NotificationService,
  private translationService: TranslateService) {
}

...

// Shows a notification
this.translationService.get('login.login-successful').subscribe(message => {
  this.notificationService.show(message);
};

Generating translation files

To generate translation files, run npm run extract. The extraction tool scans all files for string requests and creates a map of all needed strings. These will be generated in a json file.

Per default, a language file for english (en) and german (de) will be created at ./src/assets/i18n/.

Existing translations remain untouched, so that translations will not be lost (so you do not have to worry about backups and/or merging translation files).

Also, the extraction tool tracks any unused translation identifier and cleans the translation file.

Adding languages

To add another language, two steps are required:

1. Add the language to the extraction tool command: In the package.json file, there is an entry under "scripts" called "extract": "...". Find the place in the second string where the ouput files are referenced (after --output) and add an output path for your language ./src/assets/i18n/<language-code>.json.
2. Add the language to the language select in the header component: Add a new element into the #langMenu like this <button mat-menu-item (click)="useLanguage('<language-code>')">{{ 'header.<language-name>' | translate }}</button>

Examples

This is what the ARSnova frontend looks like in German. Notice the world button at the top right corner.

By clicking the world symbol, a dropdown will appear which lets you choose the display language.

Angular's i18n would now redirect you to another baked frontend application in another language. Also, notifications could have not been translated since the text of a notification comes directly from the TypeScript (and not from a html template file). That's why I chose ngx-translate which can do these things as shown underneath:

Also, the translation is on-the-fly, the page is not reloaded when the language is changed. This keeps error messages on screen while changing language.