Internationalisierung. Eine typische Aufgaben bei der Implementierung von Web-Anwendungen. Diese Anforderung macht auch vor Angular nicht halt. Hier bieten sich dem Entwickler gleich zwei Möglichkeiten: im ersten Teil haben wir die Möglichkeiten der Core-Bibliothek betrachtet, heute werfen wir einen Blick auf eine zusätzliche Bibliothek: ngx-translate.
@ngx-translate/core kann wie gewohnt per npm-Install im eigenen Projekt integriert werden. Ab hier ist die Verwendung (vielleicht im vergleich zur Core-Variante) relativ gut nach zu vollziehen. Anstatt den Build-Prozess für unterschiedliche Sprachen zu manipulieren werden die Texte hier zur Laufzeit umgewandelt. Damit das funktioniert muss das entsprechende Modul registiert und konfiguirert werden:
import {TranslateModule} from '@ngx-translate/core';
@NgModule({
imports: [
TranslateModule.forRoot()
],
...
Grundsätzlich wäre damit der Service schon einsatzbereit, müsste aber “manuell” mit Übersetzungen versehen werden. In aller Regel wollen wir hier aber die Übersetzungen in einer separaten Datei vorhalten. Im Fall von ngx-translate geschieht das in einer JSON-Struktur.
{
TITLE: 'Willkommen',
HOME: {
TEXT: 'Hallo Welt',
FOOTER: 'verwendete Sprache: {{loc}}'
}
Wie diese zugreifbar gemacht wird, wird über so genannte “TranslateLoader” entschieden. Dabei handelt es sich um ein simples Interfaces welches entweder selber implementiert werden kann oder man greift z.B. auf den HTTPLoader (@ngx-translate/http-loader) zurück. Als Beispiel einer Implementierung wäre auch eine lokale Variante denkbar:
export class I18nLoader implements TranslateLoader {
getTranslation(lang: string): Observable {
if (lang === 'de') {
return of(de);
} else {
return of(en);
}
}
}
---- Registrierung ----
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useClass: I18nLoader
}
})
(nicht für Produktion gedacht, alle Übersetzungen der Anwendungen würden immer zum Browser übertragen werden!)
Damit sind wir schon in der Lage unsere Übersetzungen ein zu setzen. Dies geschieht entweder:
im Template mittels Pipes
{{ 'HOME.TEXT' | translate }}
{{ 'HOME.FOOTER' | translate: { loc: 'de' } }}
oder im Code mittels Service
constructor(private translateService: TranslateService) {
this.locale = translateService.getBrowserLang();
translateService.use(this.locale);
translateService.get('TITLE').subscribe(t => console.log('ngx: ' + t));
}
Das Vorgehen mittels ngx-translate ist sicherlich etwas weniger komplex in der Verwendung und Konfiguration und bietet genug Flexibilität um auch im Projektalltag gut einsetzbar zu sein. Ein Nachteil müssen wir uns allerdings bewusst machen: die Übersetzungen zur Laufzeit durchführen zu lassen kostet (zumindest ein wenig) Zeit, sodass mit der (komplizierteren?) Core-Variante ein leichter Performance-Vorteil vorliegt.
