Skip to main content


Install the library using Angular CLI:

ng add @ngneat/transloco
# On an nx workspace
nx g @ngneat/transloco:ng-add

For more information, see the ng-add command page.

As part of the installation process you'll be presented with questions; Once you answer them, everything you need will automatically be created for you. Let's take a closer look at the generated files:

Transloco loader

A default http loader implementation to fetch the translation files:

import { inject, Injectable } from "@angular/core";
import { Translation, TranslocoLoader } from "@ngneat/transloco";
import { HttpClient } from "@angular/common/http";

@Injectable({ providedIn: 'root' })
export class TranslocoHttpLoader implements TranslocoLoader {
private http = inject(HttpClient);

getTranslation(lang: string) {
return this.http.get<Translation>(`/assets/i18n/${lang}.json`);


When you deploy your application and Transloco is unable to load your language files it might because you need to use a relative path:

getTranslation(langPath: string) {
return this.http.get(`./assets/i18n/${langPath}.json`);

Translation JSON files

Transloco creates boilerplate files for the requested languages with an empty JSON:

assets/i18n/{en, es}.json

The command will add the provideTransloco and provideHttpClient to your app providers:

import { ApplicationConfig, isDevMode } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import { provideTransloco } from '@ngneat/transloco';

import { TranslocoHttpLoader } from './transloco-loader.ts';

export const appConfig: ApplicationConfig = {
providers: [
config: {
availableLangs: ['en', 'es'],
defaultLang: 'en',
// Remove this option if your application doesn't support changing language in runtime.
reRenderOnLangChange: true,
prodMode: !isDevMode(),
loader: TranslocoHttpLoader

And that's it! Now we are ready to use it in our project.