[i18n] Interpolated text within tags is not rendered

🐞 bug report

Affected Package

The issue is caused by package @angular/localize

Is this a regression?

This syntax used to work back in my project before upgrade to v9 from 7.1.2

Description

A clear and concise description of the problem...

I use @angular/localize for i18n of my Angular v9 project. I run ng xi18n and xliffmerge in order to get messages.<LOCALE_ID>.xlf in xlf2 format.

Everything’s fine when I serve(or build) the app in the source locale, but the following happens when I serve in translated language.

Any INTERPOLATION is basically gone from the html when it is between the <pc> tags.

🔬 Minimal Reproduction

StackBlitz

After you download the files and install the packages

1. npm run i18n to extract and generate xlf file for translation.

The following is the generated target text. <pc id="0" equivStart="START_BOLD_TEXT" equivEnd="CLOSE_BOLD_TEXT" type="fmt" dispStart="&lt;b>" dispEnd="&lt;/b>">Right <ph id="1" equiv="INTERPOLATION" disp="{{ interpolatedText }}"/> here</pc>

1. ng serve will serve the app in en-us locale and will render

Right TEXT here

includes ‘TEXT’ which is an interpolated text.

1. ng serve --configuration=ja-jp will render the app in ja-jp locale but will render

Right here

that removes an interpolated text within the tags.

Repro Conditions

• As soon as I pull the interpolation tag(<ph>) out of the <pc> tag, everything goes back to normal.
• It only behaves this way only when there is any text other than the <ph> tag between the <pc> and </pc> tag. For instance, <pc id="0" equivStart="START_BOLD_TEXT" equivEnd="CLOSE_BOLD_TEXT" type="fmt" dispStart="&lt;b>" dispEnd="&lt;/b>"><ph id="1" equiv="INTERPOLATION" disp="{{ interpolatedText }}"/></pc> will still render just fine.

🔥 Exception or Error

No error displayed.

🌍 Your Environment

Angular Version:

Angular CLI: 9.1.7
Node: 12.13.0
OS: darwin x64

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

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

Anything else relevant?

No, all evergreen browsers render the same.

[petebacondarwin]

OK, so a bit of debugging shows that this is a bug in the MessageSerializer.visitContainedNodes() method which is responsible for loading the translations. It appears that it doesn’t cope well with <pc> container nodes that contain more than one child node. It should be a fairly straightforward fix.

[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.}