@ngx-translate/http-loader

What is @ngx-translate/http-loader?

@ngx-translate/http-loader is an Angular library that provides a way to load translation files from a web server using HTTP. It is used in conjunction with @ngx-translate/core to manage internationalization in Angular applications.

What are @ngx-translate/http-loader's main functionalities?

Loading Translation Files

This feature allows you to load translation files from a web server. The TranslateHttpLoader uses Angular's HttpClient to fetch translation files, which are typically in JSON format.

import { HttpClient } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

Custom File Paths

You can customize the path and file extension of the translation files. This example shows how to set a custom path and file extension for the translation files.

import { HttpClient } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, '/assets/i18n/', '.json');
}

Using with TranslateModule

This feature demonstrates how to integrate the TranslateHttpLoader with the TranslateModule in an Angular application. The HttpLoaderFactory is used to configure the loader for the TranslateModule.

import { HttpClient } from '@angular/common/http';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { HttpLoaderFactory } from './http-loader.factory';

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

Other packages similar to @ngx-translate/http-loader

angular-l10n

angular-l10n is another library for localization in Angular applications. It provides similar functionalities to @ngx-translate/http-loader, such as loading translation files and managing translations. However, it also includes additional features like locale management and date/number formatting.

angular-translate

angular-translate is a popular library for AngularJS (Angular 1.x) that provides similar functionalities to @ngx-translate/http-loader. It allows loading translation files via HTTP and managing translations. However, it is designed for AngularJS and not for Angular (2+).

README

@ngx-translate/http-loader

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

Simple example using ngx-translate: https://stackblitz.com/github/ngx-translate/example

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

• Installation
• Usage

Installation

We assume that you already installed ngx-translate.

Now you need to install the npm module for TranslateHttpLoader:

npm install @ngx-translate/http-loader --save

Choose the version corresponding to your Angular version:

Angular	@ngx-translate/core	@ngx-translate/http-loader
10	13.x+	6.x+
9	12.x+	5.x+
8	12.x+	4.x+
7	11.x+	4.x+
6	10.x	3.x
5	8.x to 9.x	1.x to 2.x
4.3	7.x or less	1.x to 2.x
2 to 4.2.x	7.x or less	0.x

Usage

1. Setup the TranslateModule to use the TranslateHttpLoader:

The TranslateHttpLoader uses HttpClient to load translations, which means that you have to import the HttpClientModule from @angular/common/http before the TranslateModule:

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {HttpClientModule, HttpClient} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {AppComponent} from "./app";

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http);
}

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

The TranslateHttpLoader also has two optional parameters:

• prefix: string = "/assets/i18n/"
• suffix: string = ".json"

By using those default parameters, it will load your translations files for the lang "en" from: /assets/i18n/en.json.

You can change those in the HttpLoaderFactory method that we just defined. For example if you want to load the "en" translations from /public/lang-files/en-lang.json you would use:

export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http, "/public/lang-files/", "-lang.json");
}

For now this loader only support the json format.

Angular CLI/Webpack TranslateLoader Example

If you are using Angular CLI (uses webpack under the hood) you can write your own TranslateLoader that always loads the latest translation file available during your application build.

// webpack-translate-loader.ts
import { TranslateLoader } from '@ngx-translate/core';
import { Observable } from 'rxjs/Observable';

export class WebpackTranslateLoader implements TranslateLoader {
  getTranslation(lang: string): Observable<any> {
    return Observable.fromPromise(System.import(`../assets/i18n/${lang}.json`));
  }
}

Cause System will not be available you need to add it to your custom typings.d.ts:

declare var System: System;
interface System {
  import(request: string): Promise<any>;
}

Now you can use the WebpackTranslateLoader with your app.module:

@NgModule({
  bootstrap: [AppComponent],
  imports: [
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useClass: WebpackTranslateLoader
      }
    })
  ]
})
export class AppModule { }

The disadvantage of this solution is that you have to rebuild the application everytime your translate files has changes.