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

[bougnat12]

🐞 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]

The fact that it only captures one of the locations is a bug. We should track that independently and fix it.

The incorrect disp attribute value is also a bug and is a duplicate of #39195.

The incorrect location path (zone-detail.component.ts) seems strange. It might be that source-mapping is turned off for the build? This is required in order to back-trace through from the built code to the original template. (Although I thought that the CLI would temporarily force it on for message extraction).

[alan-agius4]

The incorrect location path (zone-detail.component.ts) seems strange. It might be that source-mapping is turned off for the build? This is required in order to back-trace through from the built code to the original template. (Although I thought that the CLI would temporarily force it on for message extraction).

Indeed the CLI does forcefully turn this on. (https://github.com/angular/angular-cli/blob/677f6007268c534982c748faeebccb369cb4bc64/tests/legacy-cli/e2e/tests/i18n/extract-ivy-libraries.ts#L66)

[petebacondarwin]

I have captured the first problem in #39314, the second problem is already captured in #39195.
The other issue looks like an issue with your setup.

I am going to close this issue. Please open a new one with a link to a git repository that reproduces the incorrect source location issue.

[petebacondarwin]

First problem is now tracked in #39330

[kamilchlebek]

The incorrect location path (zone-detail.component.ts) seems strange. It might be that source-mapping is turned off for the build? This is required in order to back-trace through from the built code to the original template. (Although I thought that the CLI would temporarily force it on for message extraction).

@petebacondarwin

It seems that switching target in tsconfig.json from es2015 to es5 causes incorrect sourcefiles to be listed.

es2015 (with or without --ivy) & es5 (without --ivy)

<context context-type="sourcefile">src/app/app.component.html</context>
<context context-type="linenumber">1</context>

es5 (with --ivy)

<context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">11</context>

Here's the repo: https://github.com/kamilchlebek/i18n-ivy-es5

PS. I didn't want to create new issue, because I'm not sure whether using target: es5 is recommended. We are testing a lot on ie11, so it's more convenient for us to use it.

[petebacondarwin]

Thanks @kamilchlebek - I'll take a look. It is generally better to create new issues rather than post on closed ones.

[petebacondarwin]

@kamilchlebek - I just cloned your repo and ran ng xi18n --ivy on it. I can confirm what you are seeing.
The problem is that the source-maps generated by the build for ES5 are not accurate as you can see in this visualization.

The calls to $localize(...) are not being mapped at all.

[kamilchlebek]

@petebacondarwin Thank you for investigation. Then I think the easiest solution for me is to create tsconfig.i18n.json with:

{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "target": "es2015"
  }
}

[petebacondarwin]

The workaround for you is to create a new tsconfig.extract.json that sets target: es2015. Then update the angular.json file to have a new build configuration that references this tsconfig and finally update the extract-i18n section in that file to use this new build config.

If this workaround is not usable for you please open a new issue so that I can track the work for fixing it.

[petebacondarwin]

LOL! We had the same idea!

[bougnat12]

I made some tests with last Angular 11 and I always have bad translation:

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

for the original text to translate:

<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>

I'm really disappointed because I like the new Angular 11 version but I cannot migrate my project with this show stopper.

[kamilchlebek]

@bougnat12 There's an issue with multiline translations in angular 11. It's already reported here: #39671

Fix is on the way

[petebacondarwin]

@bougnat12 - you can check to see if #39671 is the same issue that you are experiencing by temporarily setting preserveWhitespace: true in your component and seeing whether the extraction looks better.

[bougnat12]

@kamilchlebek Thanks. I will be patient...

@petebacondarwin We always had forced "preserveWhitespaces": false in our tsconfig.json file so I don't know what to do without any risk.

I have corrected the signaled warnings: it was mainly <button>, <th> or <td> markers so it's ok to write them on a same line.

[petebacondarwin]

We always had forced "preserveWhitespaces": false in our tsconfig.json file so I don't know what to do without any risk.

I was not suggesting this as a workaround. It was purely to help you check that your problem was the same one as reported (and fixed) at #39671.

[bougnat12]

The workaround for you is to create a new tsconfig.extract.json that sets target: es2015. Then update the angular.json file to have a new build configuration that references this tsconfig and finally update the extract-i18n section in that file to use this new build config.

If this workaround is not usable for you please open a new issue so that I can track the work for fixing it.

I have created a new tsconfig.i18n.json file that sets target: es2015. But I don't understand how to update the angular.jsonfile. Could you insert an example please?

I tried:

        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "mad-web-ui:build",
            "tsConfig": "src/tsconfig.i18n.json"
          }
        },

But it failed. I think I miss a step but I don't know how to correct this...

[petebacondarwin]

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.

[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.

[bougnat12]

We always had forced "preserveWhitespaces": false in our tsconfig.json file so I don't know what to do without any risk.

I was not suggesting this as a workaround. It was purely to help you check that your problem was the same one as reported (and fixed) at #39671.

It's not the same bug as I tried to explain. Spaces issues are solved by correcting my HTML code.

My main and blocking issue is about the INTERPOLATION part:

I made some tests with last Angular 11 and I always have bad translation:

    <unit id="MAD.confirmDeleteModalMsg">
      <segment>
        <source> Confirm delete <ph id="0" equiv="INTERPOLATION" disp="e {{uiName"/>?
</source>
      </segment>
    </unit>

for the original text to translate:

<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>

Previously I had this result (as explained at the top of this issue):

        <source> Confirm delete <ph id="0" equiv="INTERPOLATION" disp="{uiName}}?"/>?

The ? character was duplicate and inside the INTERPOLATION disp part. It can be parsed but the translation asset is incorrect.

and now with Angular 11, I have:

        <source> Confirm delete <ph id="0" equiv="INTERPOLATION" disp="e {{uiName"/>?

Now, the disp part is incorrect and cannot be parsed correctly by my translation tool Loco. This is worse.

[petebacondarwin]

Yes, I believe your invalid disp is caused by the same problem as #39671. It is the whitespace before the "Confirm delete" that is causing the the disp content become misaligned.

[bougnat12]

Yes, I believe your invalid disp is caused by the same problem as #39671. It is the whitespace before the "Confirm delete" that is causing the the disp content become misaligned.

OK thanks. I understand. It's due to the HTML code indentation most of the time. I'll try to correct simple cases as to go ahead:

<button>
  LABEL
</button>

with

<button>LABEL</button>

But maybe it will remain some complicated cases. Thanks for your help.

[petebacondarwin]

Hopefully #39717 will resolve this for you @bougnat12

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}