When adding class to a div, translation gets crazy

[BADF00D]

Current behavior

I created a repository to reproduce a bug, that occurred in my production code. You can see some of the errors in the screenshot below:

At the left you can see, that I set the currently language to 'de'. But not all languages are translated correctly, some of the translations (Age, Height, Weight) are in English (default language). Furthermore an existing translation is displayed as [object Object], instead of the expected translation 'Geschlecht' (sex in German).

This strange behavior appeared, after I added some class attribute to the properties and values (see commit in branch AddingClassYieldsError). The moment I remove the class (the commit before), the error is gone:

The problem is actually caused by an editor option "Format on save" that add extras linebreaks and spaces. But I don't think this should be a problem.

Expected behavior

I expect that translations and styles can be used independently from each other. I want to use line-breaks and spaces ahead and after my translation key.

How do you think that we should fix this?

No idea. Translation keys should be trimmed, before they are used to look up a translation.

Minimal reproduction of the problem with instructions

See my repository:
https://github.com/BADF00D/NgxTranslateBug

Or a shorter version: https://stackblitz.com/edit/ngxtranslatebug?file=src/app/app.component.ts

Environment

ngx-translate version: 10.0.2
Angular version: 6.1.0



Browser:
- [x] Chrome (desktop) version 71.0.3578.98
- [x] Vivaldi (desktop) version 2.3.1440.41
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [x] Firefox version 64.0.2
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [x] Edge version  41.16299.820.0
 
Other browsers not tests

For Tooling issues:
- Node version: 9.9.9  
- Platform:  Win 10 1709

Others:

1. I was not yet able to reproduce the problem in i less expensive environment. The problem might be connected with primeng. the ui framework in use. It has nothing to do with primeng, see my stackblitz example: https://stackblitz.com/edit/ngxtranslatebug?file=src/app/app.component.ts
2. After the strange text [object Object] appears, the language seem always to switch to default language.
3. Using the same translation key in at another location (see top most translation) works fine.
4. In my production environment, I logged loaded translation to console. I can confirm that they are correct when they arrive in the browser (as point 3 already confirms)

[BADF00D]

By accident, I found out a simpler version to reproduce the problem:

<div class="value" translate>Sex.{{ viewModel?.sex }}</div>
<div class="property" translate>
  Overview.Details.InfusionParameter.Sex
</div>

<div class="value" translate>Sex.{{ viewModel?.sex }}</div>
<div class="property" translate>Overview.Details.InfusionParameter.Sex</div>

I had "Format on Save" activated and therefore VSCode inserted a LineBreak and some Spaces (see first version). This yields to the same problem with the weird [object Object stuff]

[BADF00D]

I just added a newer and shorter version with less dependencies on stackblitz: https://stackblitz.com/edit/ngxtranslatebug?file=src/app/app.component.ts

[BADF00D]

I just made another interesting observation while debugging ngx-translate-core.js. I observed that at some stage during the execution, the currentValue of the node, was set to my Sex-enum, which looks strange to me.

So I tried something else.
My translations file currently looks like:

{
  "Sex":{
     "Female": "Female",
     "Male": "Male",
     "Inter": "Inter",
     "Unknown": "-"
  },
  "Overview":{
    "Sex": "Sex"
  }
}

So the the keys are:
Sex.[Female]
Sex.[Male]
Sex.[Inter]
Sex.[Unknown]
Overview.Sex

When I change my translation files to something like

{
  "SexEnum":{
     "Female": "Female",
     "Male": "Male",
     "Inter": "Inter",
     "Unknown": "-"
  },
  "Overview":{
    "Sex": "Sex"
  }
}

my problem is gone. So obviously there is a problem, when tail of a key (Overview.Sex) overlaps with another key (Sex). I made a new StackBlitz to confirm this: https://stackblitz.com/edit/ngxtranslatebug-v2

So my question is: Is this a known limitation of this library, or a bug?

[BADF00D]

I close my ticket, because I think the basic error that causes this behavior, is already described in #998