Skip to content
This repository was archived by the owner on Nov 8, 2021. It is now read-only.

Commit 271a380

Browse files
authored
Update README.md
1 parent 0409e32 commit 271a380

File tree

1 file changed

+2
-120
lines changed

1 file changed

+2
-120
lines changed

README.md

+2-120
Original file line numberDiff line numberDiff line change
@@ -2,124 +2,6 @@
22

33
A loader for [ngx-translate](https://github.com/ngx-translate/core) that loads translations using http.
44

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

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

Comments
 (0)