1 | # @ngx-translate/http-loader [![Build Status](https://travis-ci.org/ngx-translate/http-loader.svg?branch=master)](https://travis-ci.org/ngx-translate/http-loader) [![npm version](https://badge.fury.io/js/%40ngx-translate%2Fhttp-loader.svg)](https://badge.fury.io/js/%40ngx-translate%2Fhttp-loader)
|
2 |
|
3 | A loader for [ngx-translate](https://github.com/ngx-translate/core) that loads translations using http.
|
4 |
|
5 | Simple example using ngx-translate: https://stackblitz.com/github/ngx-translate/example
|
6 |
|
7 | Get the complete changelog here: https://github.com/ngx-translate/http-loader/releases
|
8 |
|
9 | * [Installation](#installation)
|
10 | * [Usage](#usage)
|
11 |
|
12 | ## Installation
|
13 |
|
14 | We assume that you already installed [ngx-translate](https://github.com/ngx-translate/core).
|
15 |
|
16 | Now you need to install the npm module for `TranslateHttpLoader`:
|
17 |
|
18 | ```sh
|
19 | npm install @ngx-translate/http-loader --save
|
20 | ```
|
21 |
|
22 | Choose the version corresponding to your Angular version:
|
23 |
|
24 | Angular | @ngx-translate/core | @ngx-translate/http-loader
|
25 | ----------- | ------------------- | --------------------------
|
26 | 10 | 13.x+ | 6.x+
|
27 | 9 | 12.x+ | 5.x+
|
28 | 8 | 12.x+ | 4.x+
|
29 | 7 | 11.x+ | 4.x+
|
30 | 6 | 10.x | 3.x
|
31 | 5 | 8.x to 9.x | 1.x to 2.x
|
32 | 4.3 | 7.x or less | 1.x to 2.x
|
33 | 2 to 4.2.x | 7.x or less | 0.x
|
34 |
|
35 | ## Usage
|
36 | #### 1. Setup the `TranslateModule` to use the `TranslateHttpLoader`:
|
37 |
|
38 | The `TranslateHttpLoader` uses HttpClient to load translations, which means that you have to import the HttpClientModule from `@angular/common/http` before the `TranslateModule`:
|
39 |
|
40 | ```ts
|
41 | import {NgModule} from '@angular/core';
|
42 | import {BrowserModule} from '@angular/platform-browser';
|
43 | import {HttpClientModule, HttpClient} from '@angular/common/http';
|
44 | import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
|
45 | import {TranslateHttpLoader} from '@ngx-translate/http-loader';
|
46 | import {AppComponent} from "./app";
|
47 |
|
48 | // AoT requires an exported function for factories
|
49 | export function HttpLoaderFactory(http: HttpClient) {
|
50 | return new TranslateHttpLoader(http);
|
51 | }
|
52 |
|
53 | @NgModule({
|
54 | imports: [
|
55 | BrowserModule,
|
56 | HttpClientModule,
|
57 | TranslateModule.forRoot({
|
58 | loader: {
|
59 | provide: TranslateLoader,
|
60 | useFactory: HttpLoaderFactory,
|
61 | deps: [HttpClient]
|
62 | }
|
63 | })
|
64 | ],
|
65 | bootstrap: [AppComponent]
|
66 | })
|
67 | export class AppModule { }
|
68 | ```
|
69 |
|
70 | The `TranslateHttpLoader` also has two optional parameters:
|
71 | - prefix: string = "/assets/i18n/"
|
72 | - suffix: string = ".json"
|
73 |
|
74 | By using those default parameters, it will load your translations files for the lang "en" from: `/assets/i18n/en.json`.
|
75 |
|
76 | 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:
|
77 |
|
78 | ```ts
|
79 | export function HttpLoaderFactory(http: HttpClient) {
|
80 | return new TranslateHttpLoader(http, "/public/lang-files/", "-lang.json");
|
81 | }
|
82 | ```
|
83 |
|
84 | For now this loader only support the json format.
|
85 |
|
86 | ## Angular CLI/Webpack TranslateLoader Example
|
87 | 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.
|
88 |
|
89 | ```typescript
|
90 | // webpack-translate-loader.ts
|
91 | import { TranslateLoader } from '@ngx-translate/core';
|
92 | import { Observable } from 'rxjs/Observable';
|
93 |
|
94 | export class WebpackTranslateLoader implements TranslateLoader {
|
95 | getTranslation(lang: string): Observable<any> {
|
96 | return Observable.fromPromise(System.import(`../assets/i18n/${lang}.json`));
|
97 | }
|
98 | }
|
99 | ```
|
100 |
|
101 | Cause `System` will not be available you need to add it to your custom `typings.d.ts`:
|
102 | ```typescript
|
103 | declare var System: System;
|
104 | interface System {
|
105 | import(request: string): Promise<any>;
|
106 | }
|
107 | ```
|
108 |
|
109 | Now you can use the `WebpackTranslateLoader` with your `app.module`:
|
110 | ```typescript
|
111 | @NgModule({
|
112 | bootstrap: [AppComponent],
|
113 | imports: [
|
114 | TranslateModule.forRoot({
|
115 | loader: {
|
116 | provide: TranslateLoader,
|
117 | useClass: WebpackTranslateLoader
|
118 | }
|
119 | })
|
120 | ]
|
121 | })
|
122 | export class AppModule { }
|
123 | ```
|
124 |
|
125 | The disadvantage of this solution is that you have to rebuild the application everytime your translate files has changes.
|