TranslateLoader API

The loader is responsible for providing translations to your application. It can deliver embedded translations or load them from a server.

API

export abstract class TranslateLoader {
  abstract getTranslation(lang: string): Observable<TranslationObject>;
}

The matching provider helper is provideTranslateLoader(). See Configuration → Provider helpers.

API Description

getTranslation() receives the language code and returns an Observable that resolves to a translation object:

{
  "app.hello": "Hello World!"
}

In most cases you do not need to write your own loader. The bundled @ngx-translate/http-loader covers HTTP-based JSON loading and ships built-in multi-resource support. See Configuration → HTTP Loader.

Third-party loaders are listed in the plugins section.

Registering a Custom Loader

Pass the loader class (or a factory) to provideTranslateLoader(), then nest it inside provideTranslateService():

app.config.ts

import { provideTranslateService, provideTranslateLoader } from '@ngx-translate/core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideTranslateService({
      loader: provideTranslateLoader(MyTranslateLoader),
    }),
  ],
};

For loaders that need runtime arguments or values from inject(), use the factory form:

provideTranslateService({
  loader: provideTranslateLoader(() => new MyLoader(inject(HttpClient), '/i18n')),
})

You can also pass a bare class directly (it is auto-wrapped), but doing so emits a bare-class auto-wrap warning.

How to Build a Custom Loader

For a step-by-step guide see Write & use your own loader.