ngx-translate-multi-http-loader
Version:
A loader for [ngx-translate](https://github.com/ngx-translate/core) that loads translations using http.
128 lines (96 loc) • 5.27 kB
Markdown
# @ngx-translate/multi-http-loader
A loader for [ngx-translate](https://github.com/ngx-translate/core) that loads translations using http.
[](https://www.npmjs.com/package/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`:
[deepmerge-ts](https://www.npmjs.com/package/deepmerge-ts) may also need to be installed _should be done automatically though_
```sh
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+ |
## 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/']);
}
@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`
```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 using [deepmerge-ts](https://www.npmjs.com/package/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](https://caniuse.com/?search=array.at) in _not so_ old versions of Safari `< 15.4`.
## Authors and acknowledgment
* maintainer [Raphaël Balet](https://github.com/rbalet)
* Former maintainer [Dennis Keil](https://github.com/denniske)
*
[](https://www.buymeacoffee.com/widness)