Extract-i18n regression between angular 13 and 14 for some generated xliff messages

[jeandera]

Which @angular/* package(s) are the source of the bug?

compiler-cli, language-service, localize

Is this a regression?

Yes

Description

The extract-i18n command generates bad error source in the Xliff format in angular 14, but with same code it was OK with angular 13.

Here is an exemple

• For the following HTML CODE

<mat-error  i18n="@@ERROR_TCP_PORT">
           The TCP port is between
            <strong>{{ PORTS_DEFAULT_VALUES.PORT_MIN }}</strong>
            and <strong>{{ PORTS_DEFAULT_VALUES.PORT_MAX }}</strong>
</mat-error> 

In angular 13, the extract-i18n command generates the following xliff entry wich was working well. We retrieve in the source the 2 interpolation values PORTS_DEFAULT_VALUES.PORT_MIN and PORTS_DEFAULT_VALUES.PORT_MAX

<trans-unit id="ERROR_TCP_PORT" datatype="html">
        <source> The TCP port is between 
             <x id="START_TAG_STRONG" ctype="x-strong" equiv-text="&lt;strong&gt;"/>
             <x id="INTERPOLATION" equiv-text="{{ PORTS_DEFAULT_VALUES.PORT_MIN }}"/>
              <x id="CLOSE_TAG_STRONG" ctype="x-strong" equiv-text="&lt;/strong&gt;"/> and 
              <x id="START_TAG_STRONG" ctype="x-strong" equiv-text="&lt;strong&gt;"/>
              <x id="INTERPOLATION_1" equiv-text="{{ PORTS_DEFAULT_VALUES.PORT_MAX }}"/>
              <x id="CLOSE_TAG_STRONG" ctype="x-strong" equiv-text="&lt;/strong&gt;"/>
     </source>
     ...
</trans-unit>

in angiular 14, the extract-i18n command generates the BAD following xliff entry. The 2 interpolation values are lost and replaced by strange values ES.PORT_MIN and ES.PORT_MAX

  <trans-unit id="ERROR_TCP_PORT" datatype="html">
        <source> The TCP port is between
                <x id="START_TAG_STRONG" ctype="x-strong" equiv-text="&lt;strong&gt;"/>
                <x id="INTERPOLATION" equiv-text="ES.PORT_MIN }}"/>
                <x id="CLOSE_TAG_STRONG" ctype="x-strong"/> and 
               <x id="START_TAG_STRONG" ctype="x-strong" equiv-text="&lt;strong&gt;"/>
               <x id="INTERPOLATION_1" equiv-text="ES.PORT_MAX }}"/>
              <x id="CLOSE_TAG_STRONG" ctype="x-strong"/>
        </source>
      ....
      </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)

Bad RUN :

Angular CLI: 14.2.10
Node: 16.14.0
Package Manager: npm 8.13.2 
OS: darwin x64

Angular: 14.2.11
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.10
@angular-devkit/build-angular   14.2.10
@angular-devkit/core            14.2.10
@angular-devkit/schematics      14.2.10
@angular/cdk                    14.2.7
@angular/cli                    14.2.10
@angular/material               14.2.7
@schematics/angular             14.2.10
rxjs                            7.5.7
typescript                      4.8.4



GOOD Run :

Angular CLI: 13.3.8
Node: 16.14.0
Package Manager: npm 8.13.2
OS: darwin x64

Angular: 13.3.11
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1303.8
@angular-devkit/build-angular   13.3.8
@angular-devkit/core            13.3.8
@angular-devkit/schematics      13.3.8
@angular/cdk                    13.3.9
@angular/cli                    13.3.8
@angular/material               13.3.9
@schematics/angular             13.3.8
rxjs                            7.5.6
typescript                      4.6.4

Anything else?

No response

[avmaxim]

@pkozlowski-opensource @jeandera This issue is NOT reproducible in Angular 15+. I've created a StackBlitz on top of WebContainers to demo that. Feel free to run ng extract-i18n in the console. All values are sustained in the xlf file:

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en-US" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="ERROR_TCP_PORT" datatype="html">
        <source> The TCP port is between
          <x id="START_TAG_STRONG" ctype="x-strong" equiv-text="&lt;strong&gt;"/>
          <x id="INTERPOLATION" equiv-text="{{ PORTS_DEFAULT_VALUES.PORT_MIN }}"/>
          <x id="CLOSE_TAG_STRONG" ctype="x-strong" equiv-text="&lt;/strong&gt;"/> and
          <x id="START_TAG_STRONG" ctype="x-strong" equiv-text="&lt;strong&gt;"/>
          <x id="INTERPOLATION_1" equiv-text="{{ PORTS_DEFAULT_VALUES.PORT_MAX }}"/>
          <x id="CLOSE_TAG_STRONG" ctype="x-strong" equiv-text="&lt;/strong&gt;"/>
        </source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">1,4</context>
        </context-group>
      </trans-unit>
    </body>
  </file>
</xliff>

If you confirm it, then we can close this issue

[Andrew-Marks-Trisept]

This seems similar to my issue, and I can definitely still reproduce it in Angular 15.