Cht-core: Handle compiled messageformat translations throwing errors with missing translation params

[dianabarsan]

Describe the bug
Translations that match messageformat's format, but are not given expected params, are throwing errors.

To Reproduce

1. Login as any user.
2. Update the translation document for the language you're using and change a visible translation (for example the one for Reports in the header) to contain curly braces: fe Reports {thing}.
3. Got to the frontend.
4. See an error in the console and no text in your header where the "Reports" link exists.

Expected behavior
No error should be thrown. You should see the "Reports {thing}" text in your header.

Logs
Something along the lines of

TypeError: Cannot read property '<what you had between the curly braces>' of undefined

Environment

• App: webapp
• Version: 3.11

Additional context
When migrating from AngularJS to Angular, we had to change a lot of the supporting ecosystem, including the translations library.
The translation library we chose is ngx-translate, mainly because it's one of the few options available and the fact that it's API is very similar to angular-translate, the library we used before.
As one of the key differences between angular-translate and ngx-translate, ngx-translate implements a pre-compilation step to determine the final version of translations and does not support passing an external "interpolator" at runtime.
Since we were using messageformat for pluralization, we needed to pre-compile the translation with messageformat in order to make use of pluralization in the app.
This means we need to better filter which translations we should pass to messageformat to be compiled ahead of time, instead of deciding on the spot or come up with a way to support picking messageformat as an interpolator at runtime (though this might mean creating our own translations library to wrap over ngx-translate).

[dianabarsan]

Ready for AT on 7035-message-format-filter

[ngaruko]

LGTM @dianabarsan but seems to have introduced another bug where some keys are not translated as on this page (seems to be happening only on contact page) ... with contact.xx keys?

• checked in translations, those translations actually exist
  

No error in the console, except a (probably intentional debug ) warning :Error while interpolating Targets {test}

[dianabarsan]

I'm not sure, I'm not getting the same and your instance is no longer available.
Are you sure those translations worked before? Do you remember what you did before you saw this happen? Which language were you using?
Can you please make your instance available?

[dianabarsan]

Chatted with @ngaruko on Slack and replicated the issue.
It was caused by updating a specific translation (for contact) to match the messageformat style, and triggering an ngx-translate translation scoping feature.

I pushed a fix that changed the approach completely.

[ngaruko]

Is this ready for AT again @dianabarsan ?

[dianabarsan]

It's in code review right now @ngaruko , so minor changes could be requested.

[dianabarsan]

This is ready for AT again, @ngaruko . Thanks!

[ngaruko]

Looks good atm. Ready to merge! contact.* keys are now translated.

[dianabarsan]

Merged to master.