Repository: angular
Issue: Different plural ICU messages get merged in XLF
Labels: area: i18n,P3

### Which @angular/* package(s) are the source of the bug?

Don't known / other

### Is this a regression?

No

### Description

Hello,

I have the 3 plural i18n messages in 3 differents html files :

```html
 <ng-container
              *ngIf="something"
              i18n="label|label for maxRetriesAllowChanges when it was activated">
              {maxRetries.value, plural, =0 {Lock account on every bad logon attempt} =1 {Wait one bad logon attempt
              before lock account} other {Wait {{ maxRetries.value }} bad logon attempts before lock account}}
  </ng-container>
```
```html
<mat-slide-toggle formControlName="autoUnProvisioningStatus" i18n="label|label for autoUnProvisioningStatus">
            {delayBeforeAutoUnProvisioning.value, plural, =0 {Not allowed Automatic un-provisioning of users} =1 {Wait
            one day without authentication before user unprovisionoing} other {Wait
            {{ delayBeforeAutoUnProvisioning.value }} days without authentication before user unprovisionoing}}
</mat-slide-toggle>
```
```html
<ng-container *ngIf="someotherthing" i18n="label|label for tokens when toggled">
          {inputDuration.value, plural, =0 {Tokens will not time out} other {Tokens time out after
          {{ inputDuration.duration | displayedDuration }} }}
</ng-container>
```

And after running :

```shell
ng extract-i18n --output-path src
```

Which generate the messages.xlf like below :

```html
<trans-unit id="8182741047557857067" datatype="html">
        <source> <x id="ICU" equiv-text="{maxRetries.value, plural, =0 {Lock account on every bad logon attempt} =1 {Wait one bad logon attempt
              before lock account} other {Wait {{ maxRetries.value }} bad logon attempts before lock account}}" xid="475196838218317818"/> </source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/a.component.html</context>
          <context context-type="linenumber">166,169</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/b.component.html</context>
          <context context-type="linenumber">16,20</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/c.html</context>
          <context context-type="linenumber">9,12</context>
        </context-group>
        <note priority="1" from="description">label for maxRetriesAllowChanges when it was activated</note>
        <note priority="1" from="meaning">label</note>
</trans-unit>
```

This groupment is normally done when source messages are equal, but here they are not, even if they are plural messages without extra text.
Also, descriptions are different and only one is kept.

I expect the extract-i18n to generate something like below :

```html
<trans-unit id="8182741047557857067" datatype="html">
        <source> {maxRetries.value, plural, =0 {Lock account on every bad logon attempt} =1 {Wait one bad logon attempt
              before lock account} other {Wait <x id="INTERPOLATION" equiv-text="{{ maxRetries.value }}"/> bad logon attempts before lock account}}
        </source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/a.component.html</context>
          <context context-type="linenumber">166,169</context>
        </context-group>
        <note priority="1" from="description">label for maxRetriesAllowChanges when it was activated</note>
        <note priority="1" from="meaning">label</note>
</trans-unit>

<trans-unit id="8182741047557857068" datatype="html">
        <source> 
{delayBeforeAutoUnProvisioning.value, plural, =0 {Not allowed Automatic un-provisioning of users} =1 {Wait
            one day without authentication before user unprovisionoing} other {Wait
            <x id="INTERPOLATION" equiv-text="{{ delayBeforeAutoUnProvisioning.value }}"/> days without authentication before user unprovisionoing}}
 </source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/b.component.html</context>
          <context context-type="linenumber">16,20</context>
        </context-group>
        <note priority="1" from="description">label for autoUnProvisioningStatus</note>
        <note priority="1" from="meaning">label</note>
</trans-unit>

<trans-unit id="8182741047557857069" datatype="html">
        <source> 
 {inputDuration.value, plural, =0 {Tokens will not time out} other {Tokens time out after <x id="INTERPOLATION" equiv-text="{{ inputDuration.duration | displayedDuration }}"/>}}
</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/c.html</context>
          <context context-type="linenumber">9,12</context>
        </context-group>
        <note priority="1" from="description">label for tokens when not toggled</note>
        <note priority="1" from="meaning">label</note>
</trans-unit>
```


Workarround, put an id on each i18n plural to have them having each one a dedicated trans-unit.

### Please provide a link to a minimal reproduction of the bug

_No response_

### Please provide the exception or error you saw

_No response_

### Please provide the environment you discovered this bug in (run `ng version`)

```true
Angular CLI: 13.3.3
Node: 16.14.2
Package Manager: yarn 1.22.17
OS: Windows
```


### Anything else?

_No response_