ngx-translate-multi-http-loader

@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:
deepmerge-ts may also need to be installed should be done automatically though

npm install ngx-translate-multi-http-loader
npm install deepmerge-ts

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

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[] or ITranslationResource[].

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

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.

Possible error & Bugfix

Can't resolve 'deepmerge-ts'

1. run npm i deepmerge-ts

This is due to some version of npm not being able to download peerDependencies properly.

I decided to not move it under dependencies since it's considered to be a bad practice.

values.at is not a function

1. Install core-js
2. In polyfills.ts, add import 'core-js/modules/es.array.at'

deepmerge-ts@5 uses Array.at, which is not supported in not so old versions of Safari < 15.4.

Authors and acknowledgment

• maintainer Raphaël Balet
• Former maintainer Dennis Keil