Angular6 - load translations using API call to backend using ngx-translate

Question

I want to use ngx-translate in my frontend to dynamically load translations on app load.

My backend returns a response in JSON format, ex:

{
   "something: "something"
}

I want to use that output on my TranslateLoader instead of a local en.json file.

Is there any way to achieve that?

TL;DL: I want to call 'http://localhost:xxxx/api/translation/EN' to get a JSON response of the translations and load it on TranslateHttpLoader

Tret

Answer 1

You can create a factory:

export function httpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, "http://localhost:xxxx/api/translation/", "");
}

And use it in your @NgModule imports:

TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,
    useFactory: httpLoaderFactory,
    deps: [HttpClient]
  }
}),

Interrupt

This looks very simple. Would you mind sharing a bit more information on how to actually use the translation after it's parsed? – Tret

You use it the same way as if you use a local translation file (e.g en.json). See more here – Interrupt

Also, don't forgot to initialize your translation service. See more here – Interrupt

So, i'm following the instructions by letter and still get no result. The JSON response from the server looks like that: { "test": { "name": "value" } } I do this: translate.get('test.name').subscribe(res => console.log(res)); And it still doesn't work properly (doesn't return the translation) – Tret

It's very hard to debug in the comment section... are you sure the initialization works? Do you see the response in the dev tools network tab? Can you try using it with the pipe in a template and see if it works? – Interrupt

How would this work if I have to change the language selected at runtime? – Tomi

Answer 2

We can achieve using TranslateLoader provider with Custom Loader Class

In Module :

export class CustomLoader implements TranslateLoader {

  constructor(private http: Http) {}

  public getTranslation(lang: String): Observable<any> {
    return this.http.get(URL).map(
      (res: any) => {
        return res;
      }
    );

  }
}

@NgModule({
  imports: [
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useClass: CustomLoader,
      // useFactory: (createTranslateLoader),
      deps: [Http]
    })
  ]
}) 

In Component:

 constructor(private _translate: TranslateService){}

 const transText = this._translate.instant('something');

Brahmi

Thanks you for your time man. I just tried this and I get the following Error: Property 'map' does not exist on type 'Observable<Response>'. . I import Observable from 'rxjs'. – Tret

You need to add import 'rxjs/add/operator/map'; – Brahmi

Thanks again. I just fixed it. So, now is there any way to load and try the translation loaded on an Angular component? (sorry for the many question, my head is messed up with that problem) – Tret

Why you want to load in component. You can add in app.module.ts which will be applicable throughout the app – Brahmi

I need to reform my question: At this point the app has parsed the JSON response from the backend. Now I need to use those translations on the app. Let's say that the term: { "label" : "translation" } is returned. How can I use this in my component to translate my text ? – Tret

I'm still very confused on how this whole operation is going to work. You have been very helpful but still I'm confused and need to spend more time investigating. – Tret

I had to make an adjustment since I am using Angular 13. After defining CustomLoader class, return this new Loader like below: export function HttpLoaderFactory(httpClient: HttpClient): any { return new CustomLoader(httpClient); } And instead of CustomLoader replace with below: useFactory: HttpLoaderFactory, – Hendecagon