ERROR TypeError: Cannot read property 'value' of undefined

[fxck]

I'm getting this error when I try to use any placeholder.

ie:

  <h1
    *ngIf="(totalNum$ | async) as totalNum"
    translate="TICKETS_LIST_TITLE"
    [translateParams]="{ value: totalNum }">
  </h1>

{
  "TICKETS_LIST_TITLE": "{value} tiketů"
}

[fxck]

the whole error is

ERROR TypeError: Cannot read property 'value' of undefined
    at TICKETS_LIST_TITLE (eval at MessageFormat.compile (index.js:501), <anonymous>:26:40)
    at TranslateDefaultParser.interpolateFunction (core.es5.js:2863)
    at TranslateDefaultParser.interpolate (core.es5.js:2836)
    at TranslateService.getParsedResult (core.es5.js:3267)
    at TranslateService.get (core.es5.js:3314)
    at TranslateDirective.updateValue (core.es5.js:3598)
    at TranslateDirective.checkNodes (core.es5.js:3565)
    at TranslateDirective.set [as translate] (core.es5.js:3511)
    at updateProp (core.js:12619)
    at checkAndUpdateDirectiveInline (core.js:12326)

using

    "@ngx-translate/core": "^9.1.1",
    "@ngx-translate/http-loader": "^2.0.1",
    "ngx-translate-messageformat-compiler": "^3.0.0",
    "messageformat": "^1.1.1"

[fxck]

*ngIf doesn't have any effect on it, tried various versions of messageformat.. nothing helped..

cc @lephyrus

[fxck]

here's replication of the error on stackblitz https://stackblitz.com/edit/ngx-translate-pluralization?file=app%2Fapp.component.html

[lephyrus]

I've briefly looked at this and done a bit of debugging. This is what I've found:

• The behaviour is different with @ngx-translate/core v9.0.0: it results in {value} foo, but there's no error.
• There is a timing issue related to how observables are used to handle the async loading of the translation from the JSON file. The interpolation function is called multiple times, first with the correct interpolation parameters and finally without any, which leads to the wrong result or the error, depending on the version.
• The translate directive updates the content several times during the app start, which is probably not ideal. More importantly, it is again the final update which is wrong.

In short, this is an issue in @ngx-translate/core. I don't have time to look into this at the moment, maybe you can, @fxck.

[fxck]

@lephyrus I played around with it, I think ngx-translate is at fault here, it works fine with translate pipe, doesn't work with translate directive