i18n Angular Translations - internationalization

Question

Using the i18n ICU Select syntax, I have one dropdown working but not the other.
My xlf xml section here appears to be correct, but Angular throws parsing errors:
ERROR Error: Unable to parse ICU expression in "{VAR_SELECT, select, Asian {Asiático} ...
<trans-unit id="ethnicityTypes" datatype="html">
<source>{VAR_SELECT, select, Asian {Asian} African American {African American} Caucasian {Caucasian} Hispanic {Hispanic} Indian {Indian} Native American {Native American} Other {Other}}</source>
<target>{VAR_SELECT, select, Asian {Asiático} African American {Afroamericano} Caucasian {Caucásico} Hispanic {Hispano} Indian {Indio} Native American {Nativo americano} Other {Otro}}</target>
</trans-unit>
The associated Html dropdown is here:
<mat-form-field appearance="legacy">
<mat-select
*ngIf="ethnicitys"
placeholder="Ethnicity"
i18n-placeholder="##ethnicity"
formControlName="Ethnicity"
[disabled]="providerEdit"
[ngClass]="providerEdit ? 'disabled' : ''"
>
<!-- i18n ICU Select syntax -->
<mat-option *ngFor="let eth of ethnicitys" [(value)]="eth.UID">
<span i18n="Patient Edit modal|Ethnicity##ethnicityTypes">
{eth.EthnicityDescription, select, Asian {Asian} African American {African American} Caucasian {Caucasian} Hispanic {Hispanic} Indian {Indian} Native American {Native American} Other {Other}}
</span>
</mat-option>
</mat-select>
</mat-form-field>
Here's an example from my XLF Spanish file which works fine:
<trans-unit id="phoneTypeValue" datatype="html">
<source>{VAR_SELECT, select, Home {Home} Work {Work} Cell {Cell}}</source>
<target>{VAR_SELECT, select, Home {Casa} Work {Trabajo} Cell {Celular}}</target>
<note priority="1" from="meaning">patient-edit.modal</note>
</trans-unit>
This phoneTypeValue is associated with the following Html dropdown markup:
<mat-form-field appearance="outline" outline="never">
<mat-select
placeholder="Phone Type"
i18n-placeholder="##phoneType"
formControlName="PhoneType"
[disabled]="providerEdit"
>
<mat-option *ngFor="let pt of phoneTypes" [(value)]="pt.UID">
<span i18n="Phone Type value|The Phone Type data value##phoneTypeValue"
>{pt.PhoneTypeName, select, Home {Home} Work {Work} Cell {Cell}}</span
>
</mat-option>
</mat-select>
</mat-form-field>
The Angular line of code parsing the ICU Select message is:
const msgParts = replaceNgsp(message).split(PH_REGEXP); // value of PH_REGEXP = /�(\/?[#*]\d+):?\d*�/gi
This non-problematic message var comes back as:
'{�0�, select, Home {Casa} Work {Trabajo} Cell {Celular}}'
whereas this problematic var shows :
'{VAR_SELECT, select, Asian {Asiático} Work {Trabajo} Cell {Celular} Other {Otro}}'
So it's supposed to result in an array like this:
msgParts
['{�0�, select, Home {Casa} Work {Trabajo} Cell {Celular}}']
0: "{�0�, select, Home {Casa} Work {Trabajo} Cell {Celular}}"
length: 1
lastIndex: (...)
lastItem: (...)
[[Prototype]]: Array(0)
I don't know why Angular uses �0� (Unicode U+FFFD) here, but the VAR_SELECT section above for some reason is NOT replaced by the Unicode chars. I guess that's why it's failing.
I don't understand what's wrong.
Thanks in advance.