@ngx-translate/multi-http-loader

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

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
• Usage
• 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.

Now you need to install the npm module for MultiTranslateHttpLoader:

1npm 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

1import {NgModule} from '@angular/core';
2import {BrowserModule} from '@angular/platform-browser';
3import {HttpClientModule, HttpBackend} from '@angular/common/http';
4import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
5import {MultiTranslateHttpLoader} from 'ngx-translate-multi-http-loader';
6import {AppComponent} from './app';
7
8// AoT requires an exported function for factories
9export function HttpLoaderFactory(_httpBackend: HttpBackend) {
10    return new MultiTranslateHttpLoader(_httpBackend, ['/assets/i18n/core/', '/assets/i18n/vendors/']); // /i18n/core/ on angular >= v18 with the new public logic
11}
12
13@NgModule({
14    imports: [
15        BrowserModule,
16        HttpClientModule,
17        TranslateModule.forRoot({
18            loader: {
19                provide: TranslateLoader,
20                useFactory: HttpLoaderFactory,
21                deps: [HttpBackend]
22            }
23        })
24    ],
25    bootstrap: [AppComponent]
26})
27export 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

1export function HttpLoaderFactory(_httpBackend: HttpBackend) {
2    return new MultiTranslateHttpLoader(_httpBackend, [
3        {prefix: './assets/i18n/core/', suffix: '.json'},
4        {prefix: './assets/i18n/vendors/'}, // , "suffix: '.json'" being the default value
5        {prefix: './assets/i18n/non-existent/', optional: true}, // Wont create any log
6    ]);
7}

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
• Former maintainer Dennis Keil