ng i18n --ivy does not extract correctly HTML message with interpolation

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Is this a regression?

the ng i18ncommand extracts message correctly.

Description

I’m trying to use ng xi18n --ivy command with Angular 10.1.5 / CLI 10.1.5 packages to extract all my Typescript and HTML text for translation.

I have for example a label shared in four HTML templates. ng xi18n extract this label and add four location with the right interpolation.

ng xi18n --ivy generates a single location (false because it points on Typescript invalid code instead of HTML one) and interpolation is malformed. (single {instead of two {{ and ? misplaced).

🔬 Minimal Reproduction

For example, with this template code:

<mad-modal-confirm i18n="@@MAD.confirmDeleteModalMsg" i18n-title="@@psSetupPanel.modalConfirmTitle" title="Delete Power Supply" size="md" id="deletePowerSupplyButton" (closed)="deletePowerSupplyConfirm($event)">
  Confirm delete {{uiName}}?
</mad-modal-confirm>

The ng xi18n --output-path locale --format=xlf2 command will generate:

    <unit id="MAD.confirmDeleteModalMsg">
      <notes>
        <note category="location">app/components/setup/ps/setup-panel/ps-setup-panel.component.html:7,9</note>
        <note category="location">app/components/setup/wall/panel-setup/panel-setup.component.html:56,58</note>
        <note category="location">app/components/setup/vc/setup-panel/vc-setup-panel.component.html:10,12</note>
        <note category="location">app/components/setup/zone/detail/zone-detail.component.html:14,16</note>
      </notes>
      <segment>
        <source>
  Confirm delete <ph id="0" equiv="INTERPOLATION" disp="{{uiName}}"/>?
</source>
      </segment>
    </unit>

and the ng xi18n --ivy --output-path src/locale --format=xlf2 --out-file=messages-ivy.xlfcommand will generate:

    <unit id="MAD.confirmDeleteModalMsg">
      <notes>
        <note category="location">src/app/components/setup/zone/detail/zone-detail.component.ts:111</note>
      </notes>
      <segment>
        <source> Confirm delete <ph id="0" equiv="INTERPOLATION" disp="{uiName}}?"/>?
</source>
      </segment>
    </unit>

🔥 Exception or Error

🌍 Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 10.1.6
Node: 12.18.4
OS: darwin x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1001.6
@angular-devkit/build-angular   0.1001.6
@angular-devkit/core            10.1.6
@angular-devkit/schematics      10.1.6
@angular/cdk                    10.2.4
@angular/cli                    10.1.6
@schematics/angular             10.1.6
@schematics/update              0.1001.6
rxjs                            6.6.3
typescript                      4.0.3

Anything else relevant?

[petebacondarwin]

LOL! We had the same idea!

[bougnat12]

I think you have to create a new build target first, with the new tsconfig. And then reference this new target in your browserTarget property of your extract-i18n target.

@petebacondarwin Thanks for your directions! it was a little bit heavy (in my head at least 😉) but I succeeded.

Because we cannot use es2015 target for our production build it’s the best solution for us.

Best regards.