localize-translate throws 'undefined' error when string contains braces

[ArtemAvramenko]

🐞 bug report

Affected Package

The issue is caused by package @angular/localize^10.1.0-next.7

Description

In ts code I use i18n:

$localize`hello {world}`

then I extract xlf and translate it:

<trans-unit id="1122334455667788999" datatype="html">
  <source>hello {world}</source>
  <context-group purpose="location">
    <context context-type="sourcefile">myapp.js</context>
    <context context-type="linenumber">1234</context>
  </context-group>
<target xml:lang="es">hola {mundo}</target>
</trans-unit>

then I run localize-translate and get undefined error:

npx localize-translate -r scripts -s myapp.js -t strings.es.xlf -o es

🔥 Exception or Error

undefined

🌍 Your Environment

Angular Version:

10.1.0-next.7

[petebacondarwin]

Yeah - so the {world} string in your message is not valid, since such curly braced blocks will be interpreted as ICU expressions. We should provide better error messaging...

[ArtemAvramenko]

How to escape braces so end-users can see them on UI?

[petebacondarwin]

The approach in templates is to use interpolation: something like:

<div i18n>hello {{ '{' }}world}</div>

In application code, I think you could do something similar like:

$localize`hello ${'{'}world}`

[petebacondarwin]

I just tried this with the latest versions of Angular and Angular-CLI (10.1.0-rc.0). This is the error I get:

/Users/pete/dev/angular/tmp/issue38569/node_modules/@angular/localize/src/tools/src/translate/translation_files/translation_loader.js:93
                finally { if (e_1) throw e_1.error; }
                                   ^
Error: Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.)
Error: Invalid ICU message. Missing '}'.
error Command failed with exit code 1.

I get a similar error if I use the CLI to do the localization:

ng build --localize
Error: Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.)
Error: Invalid ICU message. Missing '}'.

This seems like a better error message than the undefined that you report above. Can you check to see if this is still the case for you?

This leads us onto the #38377 issue, which is about making this error message more helpful.

[ArtemAvramenko]

I checked 10.1.0-rc.0 - the error is more informative now. Thanks

[petebacondarwin]

Great. I am working on improving the error further.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}