ERROR TypeError: Cannot read property 'foo' of undefined

[fxck]

I'm submitting a ... (check one with "x")

[x] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request

Current behavior You use a {placeholder}, you get an error.

https://stackblitz.com/edit/ngx-translate-pluralization?file=app%2Fapp.component.html

Expected/desired behavior No errors.

Reproduction of the problem https://stackblitz.com/edit/ngx-translate-pluralization?file=app%2Fapp.component.html

Please tell us about your environment:

(shown in dep list on stackblitz, all the latest)

[fxck]

most likely a fault of the core, rather than the plugin, as it works for pipe, doesn't for directive

[CodeAndWeb]

The problem is in your translation file.

{
  "TITLE": "{{value}} foo"
}

See https://github.com/ngx-translate/core#3-define-the-translations

[fxck]

@CodeAndWeb except it's not the problem.

See https://github.com/lephyrus/ngx-translate-messageformat-compiler#usage

See also https://github.com/lephyrus/ngx-translate-messageformat-compiler/issues/20

[CodeAndWeb]

Right. Sorry my fault - missed that you are using message format compiler...

[jlberrocal]

As far as i know translate directive should not receive the key you are attempting to translate i just change your example to

<span translate [translateParams]="{ value: 1337 }">TITLE</span>

and error goes

[CodeAndWeb]

Both should work.

<div [translate]="'TITLE'" [translateParams]="{value: 'world'}"></div>

[jlberrocal]

@CodeAndWeb you are right seems i'm a little outdated

[CodeAndWeb]

But it's at least interesting that your version avoids the error :)

[jlberrocal]

problem seems to be related when node is empty and it tries to set the the key, i'll check it when i get some time

[elron]

I solved this by

{{ 'HELP.STEPS.1.TEXT.1' | translate:"{siteName: '" + ('SITE_NAME' | translate) + "'}" }}

`or simply by:

{{ 'HELP.STEPS.1.TEXT.1' | translate:"{siteName: 'Your Site Name'}" }}

[dmitry-dedukhin]

May be related issue https://github.com/lephyrus/ngx-translate-messageformat-compiler/issues/35 Seems that this is an error in ngx-translate core.

[stnor]

Any update on this? Same issue here w/ messageformat. Works with the filter, does not work with [translateParams].

[Eradev]

I find that having the translateParams directive before the translate directive prevents that error.

So, instead of: <span [translate]="'translateKey'" [translateParams]="{ something: value }"></span>

Use: <span [translateParams]="{ something: value }" [translate]="'translateKey'"></span>

[devniel]

hello, same problem here, I was struggling trying to figure out what was the problem; thanks for reporting it and the workarounds.