i18n: xlf-source containing a different number of HTML Tags compared to xlf-target. Since Angular 9 & 10

🐞 bug report

Affected Package

The issue is caused by package @angular/localize.

Is this a regression?

Yes, the previous version in which this bug was not present was: Angular 8 (without @angular/localize).

Description

Hi, I’ve encountered an issue with Angular 9 i18n. The translations work as expected if the same amount of HTML tags is used in “source” and “target”-translations. But if the target-translation has more HTML tags included, the resulting HTML is different from Angular 8.

Since Angular 9 the translated HTML tags will be combined. For example: in the XLF-source is a single “strong”-tag used, but in the XLF-target exist two strong-tags. The inner text of the two strong-tags will be inserted into a single strong-tag at the end of the translation text.

The issue remains with Angular 10 as well.

🔬 Minimal Reproduction

A messages-XLF with different amount of HTML tags in a single trans-unit is required:

<trans-unit id="Sample:Text" datatype="html">
<source>
    <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="<b>"/>some bold text<x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="</b>"/>
</source>
<target>
    <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="<b>"/>some original bold text<x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="</b>"/>
    some new text
    <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="<b>"/>some other bold text<x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="</b>"/>
</target>

See theses repositories:

• Working as expected: Angular 8 Sample including i18n: https://github.com/kloener/kloener-angular8-i18n-issue

• Not as expected: Angular 9 Sample including i18n: https://github.com/kloener/kloener-angular9-i18n-issue

Just checkout the repositories, install deps and build the projects with npm run build:localize. Afterwards you can run an HTTP Server on the /dist folder and compare the results.

🔥 Exception or Error

No errors are thrown during build- or runtime.

🌍 Your Environment

Angular Version:

Angular CLI: 9.1.9
Node: 12.17.0
OS: linux x64

Angular: 9.1.11
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.9
@angular-devkit/build-angular     0.901.9
@angular-devkit/build-optimizer   0.901.9
@angular-devkit/build-webpack     0.901.9
@angular-devkit/core              9.1.9
@angular-devkit/schematics        9.1.9
@angular/cli                      9.1.9
@ngtools/webpack                  9.1.9
@schematics/angular               9.1.9
@schematics/update                0.901.9
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

Anything else relevant? No.

[mhevery]

Sadly, this is working as intended (but we should throw a better error message).

In VE the translation would happen before the VE would compile the template. As a result any DOM duplication would not be a problem.

In Ivy the i18n happens after Ivy compiles the template. This is so we can have runtime i18n. Because of this the act of compilation “fixes” the number of DOM elements and i18n can only change the text, rearrange elements and or remove the elements. It is not possible to add an element since we would not know how to attach directives or any expressions to it.

I think the proper behavior here is to have a better error messages which detects and errors when the i18n anchors are duplicated.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}