# ngx-translate-multi-http-loader

> A loader for [ngx-translate](https://github.com/ngx-translate/core) that loads translations using http.

Latest version **20.0.0** (published 2025-06-04) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install ngx-translate-multi-http-loader
pnpm add ngx-translate-multi-http-loader
yarn add ngx-translate-multi-http-loader
bun add ngx-translate-multi-http-loader
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 20.0.0 |
| Published | 2025-06-04 |
| First published | 2018-06-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 11.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 81 |
| Author | Raphaël Balet |
| Maintainers | rbalet |
| Keywords | angular, i18n, transalte, ngx-translate |

## Links

- npm: https://www.npmjs.com/package/ngx-translate-multi-http-loader
- Repository: https://github.com/rbalet/ngx-translate-multi-http-loader
- Homepage: https://github.com/rbalet/ngx-translate-multi-http-loader#readme
- Issues: https://github.com/rbalet/ngx-translate-multi-http-loader/issues
- npm.io page: https://npm.io/package/ngx-translate-multi-http-loader

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.8.1

## Alternatives

- [messageformat](https://npm.io/package/messageformat.md) — 329.7K weekly downloads
- [@mintlify/scraping](https://npm.io/package/@mintlify/scraping.md) — 294.8K weekly downloads
- [@mintlify/previewing](https://npm.io/package/@mintlify/previewing.md) — 209.5K weekly downloads
- [@mintlify/prebuild](https://npm.io/package/@mintlify/prebuild.md) — 209.5K weekly downloads
- [@mintlify/link-rot](https://npm.io/package/@mintlify/link-rot.md) — 206.3K weekly downloads

## Recent versions

- 20.0.0 (latest) — 2025-06-04
- 9.2.0-beta.1 (beta) — 2022-11-22
- 19.0.3 — 2025-04-18
- 19.0.2 — 2025-01-13
- 19.0.1 — 2024-11-05
- 19.0.0 — 2024-11-05
- 18.2.0 — 2024-10-04
- 18.1.1 — 2024-09-24
- 18.1.0 — 2024-09-04
- 18.0.0 — 2024-06-12
- 17.0.0 — 2023-11-21
- 16.0.2 — 2023-09-21
- 16.0.1 — 2023-07-20
- 16.0.0 — 2023-06-06
- 15.0.0 — 2023-05-24
- … 30 more at https://npm.io/package/ngx-translate-multi-http-loader/versions

## README

# @ngx-translate/multi-http-loader

A loader for [ngx-translate](https://github.com/ngx-translate/core) that loads translations using http.

[![npm version](https://img.shields.io/npm/v/ngx-translate-multi-http-loader.svg)](https://www.npmjs.com/package/ngx-translate-multi-http-loader) ![NPM](https://img.shields.io/npm/l/ngx-translate-multi-http-loader) ![npm bundle size](https://img.shields.io/bundlephobia/min/ngx-translate-multi-http-loader)
![npm](https://img.shields.io/npm/dm/ngx-translate-multi-http-loader)

Angular 14 example: https://stackblitz.com/edit/ngx-translate-multi-http-loader-sample-2clau3?file=src/app/app.module.ts

Angular 6 example: https://stackblitz.com/edit/ngx-translate-multi-http-loader-sample

Get the complete changelog here: https://github.com/rbalet/ngx-translate-multi-http-loader/releases

* [Installation](#installation)
* [Usage](#usage)
* [Error & BugFix](#possible-error--bugfix)

## 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.

## Installation

We assume that you already installed [ngx-translate](https://github.com/ngx-translate/core).

Now you need to install the npm module for `MultiTranslateHttpLoader`:

```sh
npm install ngx-translate-multi-http-loader
```

Choose the version corresponding to your Angular version:

 | Angular | @ngx-translate/core | ngx-translate-multi-http-loader |
 | ------- | ------------------- | ------------------------------- |
 | >= 16   | 15.x+               | >= 15.x+                        |
 | 15      | 14.x+               | 9.x+                            |
 | 14      | 14.x+               | 8.x+                            |
 | 13      | 14.x+               | 7.x+                            |
 | 6       | 10.x+               | 1.x+                            |

## Usage
_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`

```typescript
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/']); // /i18n/core/ on angular >= v18 with the new public logic
}

@NgModule({
    imports: [
        BrowserModule,
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpBackend]
            }
        })
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }
```

The `MultiTranslateHttpLoader` takes a list of `(string | TranslationResource)[]`. 

### String[]
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`

```typescript
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


## Possible error & Bugfix

### values.at is not a function
1. Install `core-js`
2. In `polyfills.ts`, add `import 'core-js/modules/es.array.at'`


## Authors and acknowledgment
* maintainer [Raphaël Balet](https://github.com/rbalet) 
* Former maintainer [Dennis Keil](https://github.com/denniske) 
* 
[![BuyMeACoffee](https://www.buymeacoffee.com/assets/img/custom_images/purple_img.png)](https://www.buymeacoffee.com/widness)

---
_Source: https://npm.io/package/ngx-translate-multi-http-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._