47

I am trying to make a method which would accept string key and return translated string value by using translate.instant(parameter). The problem is that it returns key(parameter). Usually this is returned if it doesn't find translation. I think the problem is that method gets called before loader loads translations.

My app.module.ts imports:

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

createTranslateLoader function: 

 export function createTranslateLoader(http: HttpClient) { return new TranslateHttpLoader(http, './assets/i18n/', '.json'); }

In my app.component:

constructor(public translate: TranslateService){ translate.setDefaultLang('en'); translate.use('en'); }

When I translate in html using pipes it works ok.

Improve this question
12
  • Add Your code with .instant or just replace .instant() by .stream() it's work for me Commented Sep 14, 2017 at 10:14
  • in what way did you use .stream(), because when I add it, it says Argument of type 'Observable<any>' is not assignable to parameter of type 'string' Commented Sep 14, 2017 at 10:21
  • please add Your code: Commented Sep 14, 2017 at 10:23
  • 1
    this.translateService.stream(event['title']) .subscribe((title) => this.titleService.setTitle(title)) Commented Sep 14, 2017 at 10:23
  • cant get it work, i'm not that experienced, can you help me, I want to translate string in typescript and the key for translation is General.Add...how do I do this with stream? thank you. Commented Sep 14, 2017 at 10:29

7 Answers 7

Reset to default
58

You are using the TranslateHttpLoader which makes an HTTP request when it's asked for translations - translate.use('en'). If you call the instant(messageKey) method before the HTTP call returns, ngx-translate will return the key, since it has no translations yet. So you should use the get(messageKey) method to get the translation - it's asynchronous and returns an Observable:

this.translateService.get('hello.world').subscribe((translated: string) => { console.log(res); //=> 'Hello world' // You can call instant() here const translation = this.translateService.instant('something.else'); //=> 'Something else' });

You can use the instant method only when you are sure that the translations have been already loaded (as in the code example) or you can write your custom synchronous translation loader and use instant anywhere.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I tried get before and it works but I cant use it in a method because returning something from async call is risky because you return before you get the value. I was thinking about writing custom loader but I dont know how. Do you have any idea? ty for answer
You can find an example of a synchronous loader at the project website. The easiest way is to define the translations in the loader itself either as a Map object or a basic JSON object as is shown in the example.
I implemented it the way it shows in example, but now I think it doesn't find my folder with translations because everywhere only keys are written, am I missing something?
If should specify all your key/value pairs in your loader - the ones that you had in a separate JSON file, because ngx-translate doesn't load them from the JSON files anymore. If the problem persists, your best chance is to debug the loader and/or the TranslateService class from ngx-translate.
Excellent. Thanks. I was using OP's approach in the app.component.ts, and clearly the translations have not been loaded into memory yet. Your approach worked a treat.
30

You can use TranslateService only when translation file is loaded. If you want to use safely TranslateService.instant you can write an angular resolver or a guard. Resolver and guard wait to exec your component code until the observable return a value.

This is the code:

-------------------------GUARD------------------------------------

 @Injectable() export class TranslationLoaderGuard { constructor(private translate: TranslateService, private languageService: SetLanguageService) { } canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> { this.languageService.inizializeLanguage() return new Observable((observer) => { this.translate.get("last.dummy").subscribe({ next: () => { observer.next(true); }, error: error => { observer.next(false); observer.error(error); }, complete: () => { observer.complete(); }, }) }) } canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> { this.languageService.inizializeLanguage() return new Observable((observer) => { this.translate.get("last.dummy").subscribe({ next: () => { observer.next(true); }, error: error => { observer.next(false); observer.error(error); }, complete: () => { observer.complete(); }, }) }) } }

---------------------ROUTING MODULE------------------

let routing = RouterModule.forChild([ {path: "dashboard", component: DashboardComponent, canActivate: [TranslationLoaderGuard],, children: [ ........//here you can omit Guard }, }

-----Files i18n-----

In last line of each i18n translation file add the following line as is (do not translate this) ----> "last.dummy"="dummy translation"

SetLanguageService is a service that you can create to store the language used, for example in session storage (for example lang is 'it', 'en').

I hope this can help

Improve this answer

5 Comments

I like this solution using a resolver, it works perfectly
Thank you very much for this answer. It really works.:)
The ONLY solution that works!
Updated solution that support newer version of angular
It works, but need to add TranslationLoaderGuard to the providers array of the app
4

You can also make a dummy call, and await for the response. After the response, every instant call will work because its sure than the translations are loaded.

async ngOnInit() { await this.translate.get('dummyTranslation').toPromise().then(); this.translate.instant("realTranslation");
Improve this answer

4 Comments

angular doesn't wait for an async ngOnInit to finish
The idea is make an await dummy call before the real translations. Doesnt matter if put it in the ngOnInit() or where you are going to use the translation
u can change ur ngOnInit to async and that does the job actually
@WtFudgE the other event cycle doesn't wait, you not suppose to do async/await in a stream environment.
0

Just wrap your $translate.instant with the onReady like so:

$translate.onReady(function () { //Code here })

Improve this answer

1 Comment

As far as I know, ngx-translate does not have such mechanism as onReady. Can you paste a reference where this is documented/explained?
0

You can also do :

await firstValueFrom(this.translate.get('key')).then(t => this.text = t);

or :

await firstValueFrom(this.translate.get('_')); this.text = this.translate.instant('key');
Improve this answer

Comments

0

I solve my application title translation by using this

export class AppCultureService { constructor( public translateService: TranslateService, private appTitle: Title ) { } public async setCulture(culture: string){ this.translateService.setDefaultLang(culture); await firstValueFrom(this.translateService.use(culture)); this.setTitle(); } private async setTitle() { this.appTitle.setTitle( await this.translateService.instant('application.title') ); } }
Improve this answer

Comments

-3

Just a reminder: Remember to clear the localStorage. It was my mistake.

Improve this answer

1 Comment

This has nothing to do with the localStorage localStorage are only for storing values and keys and retrive the same the issue is due to to the translation files not being loaded before using the instant method.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.