Migrating to Angular 9 + Ivy using ngx-translate duplicates translations terms

Current behavior

I have migrated from angular 6 to angular 9 (following the official steps https://update.angular.io/ and all the libraries are migrated to the latest version now). I also use ngx-translate for the multi-language functionality.

Until now, using the syntax <span translate="cards" id="txt-cards"> Cards title</span> the text which is inside span was not displayed, instead the translation of the term was present.
In translation file en.json I have { “cards” : “Cards”}. So, in the browser, there was displayed the text Cards and the text " Cards title" from the span was omitted.

Now, the problem is that if a text is presented in the span, like “Cards title” in my example, the translation from cards.Cards is duplicated. SO, instead of displaying the text Cards, in the browser is displayed CardsCards.

This happens only If I set “enableIvy”: true in angularCompilerOptions, when building the app. IF this options is set to false, the issue is not presented.

Expected behavior

How do you think that we should fix this?

I am not sure if I should modify the entire app and remove the unnecessary texts or if there is something I should change in order to make it work.

Minimal reproduction of the problem with instructions

Environment

ngx-translate version: X.Y.Z
Angular version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[cexbrayat]

We just stumbled on the same issue, using Angular 9.0/Ivy and ngx-translate v12.

To be more accurate the problem occurs for us when using the translate directive without a dynamic input binding. For example:

<h1 [translate]="'home.title'">Some content</h1>

is fine, and displays only the translation of home.title. Whereas:

<h1 translate="home.title">Some content</h1>

displays home.title twice.

It can be reproduced in the unit-tests of the library itself by changing translate.directive.spec from the current:

<div #withKey [translate]="'TEST'">Some init content</div>

<div #withKey translate="TEST">Some init content</div>

The test then fails with TESTTEST instead of the expected TEST translated value.

[CarmenTalnariu]

Hello, We fixed our problem by removing the text from the tag: instead of <h1 translate="home.title">Some content</h1> we are now having <h1 translate="home.title"></h1>