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

Commit 3f59877

Browse files
sevevesocombe
authored andcommitted
docs(README): how to write a HashTranslateLoader
* Howto write a HashTranslateLoader In issue #25 @mlegenhausen pointed out a solution that shows a very common use-case for a custom TranslateLoader implementation. Maybe we can extend the readme to show this (and maybe other use-cases in the future)? Kind regards :) * Updated to review
1 parent 4f95eb6 commit 3f59877

File tree

1 file changed

+41
-0
lines changed

1 file changed

+41
-0
lines changed

README.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,3 +69,44 @@ export function HttpLoaderFactory(http: HttpClient) {
6969
```
7070

7171
For now this loader only support the json format.
72+
73+
## Angular CLI/Webpack TranslateLoader Example
74+
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.
75+
76+
```typescript
77+
// webpack-translate-loader.ts
78+
import { TranslateLoader } from '@ngx-translate/core';
79+
import { Observable } from 'rxjs/Observable';
80+
81+
export class WebpackTranslateLoader implements TranslateLoader {
82+
getTranslation(lang: string): Observable<any> {
83+
return Observable.fromPromise(System.import(`../assets/i18n/${lang}.json`));
84+
}
85+
}
86+
```
87+
88+
Cause `System` will not be available you need to add it to your custom `typings.d.ts`:
89+
```typescript
90+
declare var System: System;
91+
interface System {
92+
import(request: string): Promise<any>;
93+
}
94+
```
95+
96+
Now you can use the `WebpackTranslateLoader` with your `app.module`:
97+
```typescript
98+
@NgModule({
99+
bootstrap: [AppComponent],
100+
imports: [
101+
TranslateModule.forRoot({
102+
loader: {
103+
provide: TranslateLoader,
104+
useClass: WebpackTranslateLoader
105+
}
106+
})
107+
]
108+
})
109+
export class AppModule { }
110+
```
111+
112+
The disadvantage of this solution is that you have to rebuild the application everytime your translate files has changes.

0 commit comments

Comments
 (0)