Parts of translation are omitted in localize build, if HTML is nested

[kmcs]

🐞 bug report

Affected Package

@angular/localize

Is this a regression?

No

Description

If I use the following code in the template:

<ng-container i18n="@@translation_with_nested_html">
  <p>THIS PHRASE IS MISSING <strong>my bold text</strong> other phrase of this paragraph.</p>
</ng-container>

The extraction (npm run extract) is fine and creates a xliff2 unit like the following:

    <unit id="translation_with_nested_html">
      <notes>
        <note category="location">src/app/app.component.html:5,7</note>
      </notes>
      <segment>
        <source>
  <pc id="0" equivStart="START_PARAGRAPH" equivEnd="CLOSE_PARAGRAPH" type="other" dispStart="&lt;p&gt;" dispEnd="&lt;/p&gt;">THIS PHRASE IS MISSING <pc id="1" equivStart="START_TAG_STRONG" equivEnd="CLOSE_TAG_STRONG" type="other" dispStart="&lt;strong&gt;" dispEnd="&lt;/strong&gt;">my bold text</pc> other phrase of this paragraph.</pc>
</source>
      </segment>
    </unit>

In the translation file for french the target looks like that:

<target>
<pc id="0" equivStart="START_PARAGRAPH" equivEnd="CLOSE_PARAGRAPH" type="other" dispStart="&lt;p&gt;" dispEnd="&lt;/p&gt;">THIS CETTE PHRASE EST MANQUANTE <pc id="1" equivStart="START_TAG_STRONG" equivEnd="CLOSE_TAG_STRONG" type="other" dispStart="&lt;strong&gt;" dispEnd="&lt;/strong&gt;">mon texte en gras</pc> autre phrase de ce paragraphe.</pc>
</target>

After build with localize option the HTML output of the ng-container above is the following:

<p><strong>mon texte en gras</strong> autre phrase de ce paragraphe.</p>

The part "THIS CETTE PHRASE EST MANQUANTE " was omitted.

Expected result of the localized build for french is:

<p>THIS CETTE PHRASE EST MANQUANTE <strong>mon texte en gras</strong> autre phrase de ce paragraphe.</p>

🔬 Minimal Reproduction

checkout: https://github.com/kmcs/bug-angular-i18n_nested_html
run command: npm install && npm run build -- --localize

🔥 Exception or Error

No

🌍 Your Environment

Angular Version:

Angular CLI: 9.1.12
Node: 12.16.2
OS: linux x64

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

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

Anything else relevant?
No

[petebacondarwin]

I can confirm that this is a bug in the $localize i18n translation file parser.

[petebacondarwin]

#38452 fixes this issue.

[angular-automatic-lock-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.}