Too many spaces in extracted keys

[lares83]

We have e.g. two elements with the same translation namely:

<div translate>
  this is an example
  of a long label
</div>

<div>
  <p translate>
    this is an example
    of a long label
  </p>
</div>

extract to JSON will generate two new translations namely:

{
   "this is an example  of a long label": "",
   "this is an example    of a long label  ": "",
}

ngx-translate will not take into consideration such keys. Correct key that should be is "this is an example of a long label". Worth to mention is also the fact that second label has empty spaces at the end of the key as well.

Could you please look at it and get rid of not needed spaces?

[SteffenSchwaiger]

@biesbjerg Why is this issue reopened?

[robstoll]

I have the same issue with 6.0.4 so it makes sense this is re-opened again.

[ionut-t]

Same issue here with version 6.1.0

[robstoll]

@biesbjerg I can make a PR, I would remove all double \s. What do you think?

[biesbjerg]

@robstoll I don't think that's the right approach, to be honest. Multiple spaces is perfectly valid and should be preserved (for example used inside the context of a <pre> element). It would need to be handled the same way Angular's template parser parses html content, which I haven't had time to look into.

[robstoll]

I see, makes sense. I can take a look if you want. Would you want to support html inside a key as well?

[biesbjerg]

Cool :) Yes, I think that would make sense

[biesbjerg]

Actually, we should probably look at how TranslateDirective gets the key, rather than what Angular template parser does:

https://github.com/ngx-translate/core/blob/master/projects/ngx-translate/core/src/lib/translate.directive.ts#L60

Edit: If I'm reading this correctly, TranslateDirective doesn't actually support translation of html content, but only first child strings?

https://github.com/ngx-translate/core/blob/7241c863b2eead26e082cd0b7ee15bac3f9336fc/projects/ngx-translate/core/tests/translate.directive.spec.ts#L93

[biesbjerg]

I think I have a solution, hang on and I'll have something comitted :)

[robstoll]

Edit: If I'm reading this correctly, TranslateDirective doesn't actually support translation of html content, but only first child strings?

I actually never used it myself but saw html in translation keys (I assumed the corresponding devs tested that). In this case you revealed several bugs in projects I am involved in (thx) and also a bug in this library. Currently not first child strings are extracted but the whole html.

[biesbjerg]

I just did a test:

<div translate>Hello <span>world</span></div>

With this json translations file:

{
    "Hello <span>world</span>": "html works in keys",
    "Hello": "Hola",
    "world": "mundo"
}

Results in:

Hola world

So would seem html is not supported by TranslateDirective (TranslatePipe and TranslateService probably does work with html - haven't checked)

[biesbjerg]

Work in progress in this branch: https://github.com/biesbjerg/ngx-translate-extract/commits/key-whitespace-handling

[robstoll]

I hope that I will have time to look into it next week, shall I take over then or do you intend to finish it yourself?

[biesbjerg]

@robstoll I just merged a fix, but thanks!

Will be released in the next version.