|
2 | 2 |
|
3 | 3 | A loader for [ngx-translate](https://github.com/ngx-translate/core) that loads translations using http.
|
4 | 4 |
|
5 |
| -Simple example using ngx-translate: https://stackblitz.com/github/ngx-translate/example |
| 5 | +---------- |
6 | 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. |
| 7 | +**⚠️ The content of this repository was moved to the main [ngx-translate repository](https://github.com/ngx-translate/core)** |
0 commit comments