ngx-translate/xliff-loader

xliff-loader.ts

import { TranslateLoader } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';
import { XMLParser } from 'fast-xml-parser';

type TransUnit = {
	id: string;
	segment: {
		source: { '#text': string; 'xml:lang': string };
		target: { '#text': string; 'xml:lang': string };
	};
};

type Translation = { [key: string]: string };

@Injectable()
export class XliffLoader implements TranslateLoader {
	private parser = new XMLParser({
		ignoreAttributes: false,
		attributeNamePrefix: '',
	});

	constructor(private http: HttpClient) {}

	getTranslation(lang: string): Observable<Translation> {
		if (lang === 'en') {
			return of({});
		}
		return this.http
			.get(`/i18n/messages.${lang}.xlf`, { responseType: 'text' })
			.pipe(map((xml: string) => this.parseXliff(xml)));
	}

	private parseXliff(xml: string): Translation {
		const parsed = this.parser.parse(xml);
		const translations: Translation = {};

		const transUnits = parsed.xliff.file.body['unit'];
		transUnits.forEach((unit: TransUnit) => {
			const source = unit.segment.source;
			const target = unit.segment.target;
			// Fallback to source if target is missing
			translations[source['#text']] = target['#text'] || source['#text'];
		});

		return translations;
	}
}