Translate directive fails to update values on language change, when values are surrounded by newlines

[dpmott]

Current behavior

Template elements which use the translate directive and whose value are surrounded by newlines do not respond to language changes. If that value is interpolated from an angular variable, it's not initially translated at all the initial value is translated, but changes to the variable cause the original key text to be displayed, and at no point does it appear to respond to language changes.

See also: #998 (comment)
Possibly related: #1091

Expected behavior

translate directive properly translates the specified value.

How do you think that we should fix this?

Unknown. The issue appears to pre-date release 12.0.0, although
#998 / #1016 appears to have made things a bit worse in that interpolated variables are not translated at all now don't respond to language changes now.

Minimal reproduction of the problem with instructions

Specify a translated div or span in the angular template file, which includes newlines around the value to be translated:

  <div translate>
    {{ myVariable }}
  </div>
  <div translate>
    HEADER.NAME
  </div>

In the component implementation file:

  myVariable = 'HEADER.TITLE';
  // in ngOnInit():
  setTimeout(() => { this.myVariable = 'HEADER.NAME' }, 1000);

In the en.json file:

{
  "HEADER": {
    "TITLE": "The Title",
    "NAME": "The Name"
}

Environment

ngx-translate version: 12.0.0
Angular version: 8.2.14

Browser:
- [X] Chrome (desktop) version XX
(Haven't checked other browsers yet)
 
For Tooling issues:
- Node version: v10.18.1
- Platform:  Windows

[ocombe]

Thanks, I'll take a look at it when I can, but if you want to try to do a PR that would be even better.
The first thing to do might be to revert the change to the directive, and take a look at the other PRs that tried to fix the problem (and that I closed because I thought the one I had was working).

[dpmott]

I have a new test and a one-line code change that I believe addresses this issue, and was going to post the PR today.

I'll pull down the latest master branch and re-evaluate.

At a minimum, I believe that I introduced a bug with this line:
node.originalContent = content || node.originalContent;
node.originalContent = node.originalContent || content ; <--- which appears to have been fixed by 1167/1164 🎉

which now appears in multiple places.

When Angular re-interpolates the value from a variable into the DOM, I'm pretty sure that new value needs to be captured as the new translation key, otherwise it won't get re-translated. So, keeping the old content in a lookup key variable is incorrect.

(edited)

[dpmott]

@ocombe Added #1169 for your inspection. Hopefully it sparks some good discussions that will help me to become a better contributor to this code base. 😃