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

Created on 10 Mar 2020 · 6Comments · Source: ngx-translate/core

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 Cards title 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:

Source

CarmenTalnariu

👍7

Most helpful comment

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.

cexbrayat on 31 Mar 2020

👍2

All 6 comments

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.

cexbrayat on 31 Mar 2020

👍2

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>

CarmenTalnariu on 31 Mar 2020

👍1

Got the same issue

igorpetuh on 7 Apr 2020

I have found out that duplicates happen when I'm using the translate directive with a static parameter and a second directive is applied (e.g. ). When I'm just using translate directive with a static parameter without other directives everything is fine (e.g. ).
For now I replaced all static binding with dynamic ones, which works as a workaround (e.g. ).