Sometime the translation are not loaded when starting the app

[Bidou44]

I found out an issue where sometimes the translations are not correctly loaded. It seems to happen only on fast devices; the key of the translation is displayed instead of the translation itself, something like home.mylabel.mytext.

I'm not completely sure, but I have the impression that the problem comes from the use() method that returns a Promise: on fast devices, the bootstrapping of the application and display of the home page is faster than the loading of the language file, which cause the issue mentioned above.

I searched for a solution where I could display the first page only when the Promise of the use() method complete, and land on APP_INITIALIZER. Unfortunately, I'm in a Nativescript context and I'm afraid that they are not supporting this NativeScript/nativescript-angular#1487

What are the possible workarounds? Would a synchronous use() method be possible?

[ocombe]

hi, did you try v12 that was just released? One of the fixes in it is supposed to fix that issue

[Bidou44]

Yes, I'm using v12 and unfortunately I still have the problem. But I will try again on Monday to be sure...

What I can say concerning this issue:
The problem never even happend in debug mode (debug in Visual Studio Code or using tns run xxx). It happened only when released on the store OR released locally and then deployed on the phone (ipa file).
The second condition is that I have to use a fast device, for example an iPhone Xr. Using an old device like an iPhone 6 does never produce the error.

So the condition is: Deployed AND on a fast device.
Hope it helps...

[Bidou44]

@ocombe I can confirm that it is NOT working with v12 when deployed on 'fast' devices (just tested with an iPhone Xr (not working) and a Iphone 6 (I would say that prior v12 it was always working and with v12 it is sometimes working and sometimes not). The error is that I see an empty string instead of the translation).

Note that if instead of using the translate pipe in my view 'xxx' | translate I create a method that gets the translation with _translator.instant(xxx); and call it from my view, then it seems to work. It's my current workaround.

[dpmott]

Possibly related: #998 (comment)

[Bidou44]

Not sure but I would say that those issues are not related....
@ocombe Do you need more info? Are you able to reproduce it on your side?

[Bidou44]

@ocombe Just tested with version 12.1.1, not working better

[LilaHickey]

Hi @Bidou44, I'm curious if this might be the same issue as one I'm encountering, and had a couple questions:

1. are all translations failing? or only some?
2. if not all translations are failing - have you been able to find any pattern in the failures?

I'm seeing some translations occur successfully and others not, in the same page view. I can't discern a pattern, either by scope (some parts of a single component are translated while others are not) or by by method (seeing it for both .get and translate pipe, but not consistently for either)

[Bidou44]

Hi there

1. Only some translations are failing
2. I was unfortunately not able to find a pattern, but it does not happen everywhere and only when using a pipe (at lease in my case).

My workaround currently is to replace the pipe with a method that calls translate.intant(). Also, it is ALWAYS working when debugging (simulator and device). The problem happens only when the app is released (for example, deployed in the store)

[LilaHickey]

Thanks for the quick response/info! That sounds very consistent with what we are seeing in terms of the translation failure manifestation.

We don't deploy to a store, but similarly we are only seeing this in our production build when deployed in certain environments. No obvious patterns there yet, either.

[LilaHickey]

Hey @Bidou44 - just as an FYI, I've determined that - in our case - this behavior was the result of not setting explicit caching behavior on our en.json file. Because we didn't explicit dictate that behavior, some browsers (Firefox, possibly others) were caching the file aggressively and so the translate/fail-to-translate was purely an issue of which translations were net-new to the current release.

Don't know if this is at all applicable for you, but figured I'd share :)

[Bidou44]

Thank for the update.

Like I wrote in my first message, I'm in a Nativescript context (not web) so unfortunately, I don't think that your fix will work for me...

[LilaHickey]

My apologies, I forgot about that aspect of your environment/scenario!

[suppadeliux]

Hello,
I develop an angular application, and I have the exact same problem in production mode. Sometimes it happens in firefox, and rarely in chrome/chromium. Problem happens with pipe and instant method, in same view but not for all translations :( . So pretty hard to find a pattern, but the fast devices could be a good possibility.

@LilaHickey , I am sorry, but not sure if I understood the workaround, could you explain in a few words how did you achieve to fix this bug?.

Thanks in advance.

version => "@ngx-translate/core": "^12.0.0",

[Bidou44]

I'm closing this issue, since in the meantime, Nativescript released a new version that supports APP_INITIALIZER and this seems to solve this issue. At least I never saw this problem again.