Core: Custom MissingTranslationHandler not called?

[ftaleman]

Hi,

When trying to get a non-existing translation key (in this case 'mytranslationkey' we're getting the following error:

TypeError: Cannot read property 'mytranslationkey' of undefined
    at Parser.getValue (translate.parser.ts:35)
    at TranslateService.getParsedResult (translate.service.ts:201)
    at TranslateService.get (translate.service.ts:238)
    at TranslatePipe.updateValue (translate.pipe.ts:72)
    at TranslatePipe.transform (translate.pipe.ts:109)

We're using a custom TranslateLoader and set a MissingTranslationHandler in the bootstrap:

bootstrap(EBusinessCloudAppComponent, [
    HTTP_PROVIDERS,
    ROUTER_PROVIDERS,
    provide(AuthHttp, { ...}),
    provide(MissingTranslationHandler, { useClass: MyMissingTranslationHandler }),
    provide(TranslateLoader, {
        useFactory: (authHttp) => new EbusinessTranslateLoader(authHttp, 'i18n', '.json'),
        deps: [AuthHttp]
    }),
    TranslateService
]);

The custom Translateloader is loading the json content from our API, the structure of the data is exactly as in the static json files

All help would greatly be appreciated!

Best regards
Frederik

[ocombe]

Do you see it load in your network panel? Can you put a console.log in the result of the data returned by your loader?

[ftaleman]

Hi Olivier,

Thanks for your reply!

I've added console.log(JSON.stringify(data)) like this:

public getTranslation(lang: string): Observable<any> {
        console.log("Getting translations for language: " + lang);
        return this.authHttp.get(this._i18nUrl+'/'+lang)
            .map((res: Response) => res.json())
            .do(data => console.log(JSON.stringify(data))) // eyeball results in the console
            .catch(this.handleError);
    }

This is what's displayed in the console:

{"customers":"klanten",
"TRAN_VALUESHOULDBE":"Waarde moet {p0} zijn dan {p1}",
"TRAN_WIDTH":"Breedte",
"hello":"Hello {{p0}}"
...
}

Best regards
Frederik

[ksontini]

Hi ,

I'm getting the same issue. MyMissingTranslationHandler is not called.

When logging the translateService, The handler Class is loaded. (with default TranslateStaticLoader...)

the error in my console: EXCEPTION: TypeError: Cannot read property 'LOGIN' of undefined in [{{"LOGIN" | translate}} in LoginComponent...

[Tiuser4567]

@ksontini , @ftaleman
Are you guys using a different default lang from the current language? and case where the default language is not loaded at least once?
e.g
this.translate.setDefaultLang('en');
this.translate.use('de');

As a workaround, it seems you need to load the default language at least once.
this.translate.setDefaultLang('en');
this.translate.use('en'); //load
this.translate.use('de');

so that the TranslateService has loaded the default lang (in above case 'en' lang) in the this.translations object.

offending code is in translate.service.ts#getParsedResult:201, the object this.translations[this.defaultLang] passed to translate.parser.ts#getValue(target, key):35 where target[key] is evaluated. Since target (this.translations[this.defaultLang]) is undefined , the browser throws an error.

[ocombe]

Oh thanks for finding where the problem is, that will make fixing it easier :)

[Tiuser4567]

Duplicate of https://github.com/ocombe/ng2-translate/issues/87

[DavidWiesner]

@Tiuser4567 your workaround is not working if the key is also not defined in the default language and the key is representing a nested object (like: pages.home.title). The PR #140 solved this problem in my case.

[nickkenens]

@Tiuser4567's workaround worked like a charm, thanks for sharing! ;)

[ocombe]

Closing this as it's been resolved, let me know if that's not the case.