Skip to content

Commit

Permalink
Howto write a HashTranslateLoader
Browse files Browse the repository at this point in the history
In issue ngx-translate#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 :)
  • Loading branch information
seveves authored Jan 30, 2018
1 parent 4f95eb6 commit 122f858
Showing 1 changed file with 44 additions and 0 deletions.
44 changes: 44 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -69,3 +69,47 @@ export function HttpLoaderFactory(http: HttpClient) {
```

For now this loader only support the json format.

## Custom TranslateLoader strategies
### HashTranslateLoader - Hashing translation files with angular-cli, webpack and SystemJS
Allow caching of translation files by the browser could help to speed up the initial load of your app but with the default setup your translation files could miss the latest changes because the cache doesn't have the latest version of your translation file yet.

When using the 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.

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

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

When your project cannot find `System` then adding this to your `typings.d.ts` file helps:
```typescript
declare var System: System;
interface System {
import(request: string): Promise<any>;
}
```

Now you can use the `HashTranslateLoader` with your `app.module`:
```typescript
@NgModule({
bootstrap: [AppComponent],
imports: [
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useClass: HashTranslateLoader
}
})
]
})
export class AppModule { }
```

One disadvantage of this solution is that you have to rebuild your application when there are only changes inside your language files.

0 comments on commit 122f858

Please sign in to comment.