ICU expression (plural) does not work with angular and HTML tags, since angular 9

🐞 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: 8.3.29

Description

After update to Angular 9 (and similarly for Angular 10), ICU expression does not render component or HTML tags inside ICU expression (in this case - plural expression). There is no error in browser or console, only "One " and "Other " strings are displayed without buttons (included in expressions). It worked fine for Angular 8 (both buttons were displayed):

<ng-container i18n="Plurals example">{
  pluralsValue, plural,
    one {One <ng-container *ngTemplateOutlet="myTemplate"></ng-container>}
    other {Other <button>button_other</button>}
}</ng-container>

<ng-template #myTemplate>
  <button>button_one</button>
</ng-template>

🔬 Minimal Reproduction

Angular 8 (working):

https://stackblitz.com/edit/angular-plurals-angular8 Angular 9 (not working, regression): https://stackblitz.com/edit/angular-plurals-angular9

🔥 Exception or Error

🌍 Your Environment

Angular Version:

Angular 9+

Anything else relevant?

[petebacondarwin]

The new ivy extraction ought to be able to provide a bit better information about the original context of the placeholders, although currently I see it is rather broken:

<x id="START_TAG_NG_TEMPLATE" equiv-text="iner&gt; &lt;/ng-templ"/>
  One
  <x id="START_TAG_NG_CONTAINER" equiv-text="se=&quot;other&quot;&gt;Other &lt;button&gt;button_ot"/>
  <x id="CLOSE_TAG_NG_CONTAINER" equiv-text="&lt;/ng-container&gt;&lt;ng-template #myTem"/>
<x id="CLOSE_TAG_NG_TEMPLATE"/>
<x id="START_TAG_NG_TEMPLATE_1"/>
  Other
  <x id="START_TAG_BUTTON"/>button_other<x id="CLOSE_TAG_BUTTON"/>
<x id="CLOSE_TAG_NG_TEMPLATE"/>

I would expect it to be more like:

<x id="START_TAG_NG_TEMPLATE" equiv-text="&lt;ng-template ngPluralCase=&quot;one&quot;&gt;"/>
  One
  <x id="START_TAG_NG_CONTAINER" equiv-text="&lt;ng-container *ngTemplateOutlet=&quot;myTemplate&quot;&gt;"/>
  <x id="CLOSE_TAG_NG_CONTAINER" equiv-text="&lt;/ng-container&gt;"/>
<x id="CLOSE_TAG_NG_TEMPLATE" equiv-text="&lt;/ng-template&gt;/>
<x id="START_TAG_NG_TEMPLATE_1" equiv-text="&lt;ng-template ngPluralCase=&quot;other&quot&gt;"/>
  Other
  <x id="START_TAG_BUTTON" equiv-text="&lt;button&gt;"/>button_other<x id="CLOSE_TAG_BUTTON" equiv-text="&lt;/button&gt;"/>
<x id="CLOSE_TAG_NG_TEMPLATE" equiv-text="&lt;/ng-template&gt;/>

I will work on some fixes for this…

[petebacondarwin]

@rygoebel thanks for the excellent reproductions of this problem. I can confirm that this is a regression. @mhevery is currently reworking some of the ICU handling in Ivy and so this may be related.