TypeScript icon, indicating that this package has built-in type declarations

16.0.0 • Public • Published

@ngx-translate/multi-http-loader npm version

A loader for ngx-translate that loads translations using http.

Angular 14 example:

Angular 6 example:

Get the complete changelog here:

breaking change: v9.0.0

  • This library is now using httpBackend instead of the httpClient, to avoid being delayed by interceptor, which was creating errors while loading.
  • From the v9, the library will only be using a list of string[] so prefix & suffix aren't needed anymore and .json gonna be the default suffix.


We assume that you already installed ngx-translate.

Now you need to install the npm module for MultiTranslateHttpLoader:

npm install ngx-translate-multi-http-loader --save

Choose the version corresponding to your Angular version:

Angular @ngx-translate/core ngx-translate-multi-http-loader
14 14.x+ 8.x+
13 14.x+ 7.x+
6 10.x+ 1.x+


The MultiTranslateHttpLoader uses HttpBackend to load translations, therefore :

  1. Create and export a new HttpLoaderFactory function
  2. Import the HttpClientModule from @angular/common/http
  3. Setup the TranslateModule to use the MultiTranslateHttpLoader
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {HttpClientModule, HttpBackend} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {MultiTranslateHttpLoader} from 'ngx-translate-multi-http-loader';
import {AppComponent} from './app';

// AoT requires an exported function for factories
export function HttpLoaderFactory(_httpBackend: HttpBackend) {
    return new MultiTranslateHttpLoader(_httpBackend, ['/assets/i18n/core/', '/assets/i18n/vendors/']);

    imports: [
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpBackend]
    bootstrap: [AppComponent]
export class AppModule { }

The MultiTranslateHttpLoader takes a list of string[] or ITranslationResource[].


For example ['/assets/i18n/core/', '/assets/i18n/vendors/'],
will load your translations files for the lang "en" from : /assets/i18n/core/en.json and /assets/i18n/vendors/en.json

Custom suffix

For now this loader only support the json format.

Instead of an array of string[],
you may pass a list of parameters:

  • prefix: string = '/assets/i18n/'
  • suffix: string = '.json'
  • optional: boolean = true
export function HttpLoaderFactory(_httpBackend: HttpBackend) {
    return new MultiTranslateHttpLoader(_httpBackend, [
        {prefix: './assets/i18n/core/', suffix: '.json'},
        {prefix: './assets/i18n/vendors/'}, // , "suffix: '.json'" being the default value
        {prefix: './assets/i18n/non-existent/', optional: true}, // Wont create any log

The loader will merge all translation files from the server using deepmerge-ts.

Authors and acknowledgment

Package Sidebar


npm i itopplus-ngx-translate-multi-http-loader

Weekly Downloads






Unpacked Size

15.8 kB

Total Files


Last publish


  • tonmanna