# Using Xliff If your project uses XLIFF for translation management, Transloco makes it easy to handle and load these files. In this section, we'll walk you through setting up a custom loader to work with XLIFF translation files, and configure it in your Angular application. {% stepper %} {% step %} ### Install the XLIFF Package {% tabs %} {% tab title="pnpm" %} ```bash pnpm add xliff ``` {% endtab %} {% tab title="yarn" %} ```bash yarn add xliff ``` {% endtab %} {% tab title="npm" %} ```bash npm install xliff ``` {% endtab %} {% endtabs %} {% endstep %} {% step %} ### Implement a Custom XLIFF Loader Replace the default HTTP loader in Transloco with a custom loader that fetches and processes XLIFF translation files. {% tabs %} {% tab title="Standalone" %} ```typescript import { TRANSLOCO_LOADER, Translation, TranslocoLoader, TRANSLOCO_CONFIG, translocoConfig, TranslocoModule, } from '@jsverse/transloco'; import { Injectable, isDevMode, NgModule } from '@angular/core'; import { from } from 'rxjs'; import { switchMap, map } from 'rxjs/operators'; import xliff from 'xliff/xliff2js'; // Utility function to convert XLIFF to the Transloco format function toTranslationFormat(json: any): Translation { const obj = json.resources.transloco; return Object.keys(obj).reduce((acc, key) => { acc[key] = obj[key].target; return acc; }, {} as Translation); } @Injectable({ providedIn: 'root' }) export class TranslocoXliffHttpLoader implements TranslocoLoader { constructor(private http: HttpClient) {} getTranslation(lang: string) { return this.http .get(`/assets/i18n/${lang}.xlf`, { responseType: 'text' }) .pipe( switchMap((translation) => from(xliff(translation))), map(toTranslationFormat) ); } } bootstrapApplication(AppComponent, { providers: [ provideTransloco({ ..., loader: TranslocoXliffHttpLoader }), ], }); ``` {% endtab %} {% tab title="NgModule" %} ```typescript import { HttpClient } from '@angular/common/http'; import { TRANSLOCO_LOADER, Translation, TranslocoLoader, TRANSLOCO_CONFIG, translocoConfig, TranslocoModule, } from '@jsverse/transloco'; import { Injectable, isDevMode, NgModule } from '@angular/core'; import { from } from 'rxjs'; import { switchMap, map } from 'rxjs/operators'; import xliff from 'xliff/xliff2js'; // Utility function to convert XLIFF to the Transloco format function toTranslationFormat(json: any): Translation { const obj = json.resources.transloco; return Object.keys(obj).reduce((acc, key) => { acc[key] = obj[key].target; return acc; }, {} as Translation); } @Injectable({ providedIn: 'root' }) export class TranslocoXliffHttpLoader implements TranslocoLoader { constructor(private http: HttpClient) {} getTranslation(lang: string) { return this.http .get(`/assets/i18n/${lang}.xlf`, { responseType: 'text' }) .pipe( switchMap((translation) => from(xliff(translation))), map(toTranslationFormat) ); } } @NgModule({ exports: [TranslocoModule], providers: [ provideTransloco({ ..., loader: TranslocoXliffHttpLoader }), ], }) export class TranslocoRootModule {} ``` {% endtab %} {% endtabs %} {% endstep %} {% step %} ### Sample XLIFF Translation File (v1.2) Create your XLIFF translation files in the `assets/i18n` folder. Here's an example of a v1.2 XLIFF file: ```xml

Hello Transloco! Bonjour Transloco!

``` {% endstep %} {% endstepper %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://jsverse.gitbook.io/transloco/resources/recipies/using-xliff.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.