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
- This library is now using
httpBackend
instead of thehttpClient
, 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[]
soprefix
&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
:
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 | 16.x+ | 15.x+ |
15 | 15.x+ | 9.x+ |
14 | 14.x+ | 8.x+ |
13 | 14.x+ | 7.x+ |
6 | 10.x+ | 1.x+ |
The MultiTranslateHttpLoader
uses HttpBackend to load translations, therefore :
- Create and export a new
HttpLoaderFactory
function - Import the
HttpClientModule
from@angular/common/http
- Setup the
TranslateModule
to use theMultiTranslateHttpLoader
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/']);
}
@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[]
.
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
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.
- 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.
- Install
core-js
- In
polyfills.ts
, addimport '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
.
- maintainer Raphaël Balet
- Former maintainer Dennis Keil