Extractor no longer extracts the parameter/expression of the interpolated string into disp attribute

[jaska45]

🐞 bug report

Is this a regression?

Yes. This used to work in 10.0 and earlier.

Description

Extractor no longer extracts the parameter/expression of the interpolated string into disp attribute

🔬 Minimal Reproduction

Repo is here.

Write an interpolated string that has any parameter. For example

<p i18n>My name is {{name}}</p>

Then run the extractor

ng xi18n --format=xlf2 --output-path src/locale --ivy

The result XLIFF no longer contain disp attribute of it does not contain the parameter/expression used in the interpolated string

      <segment>
        <source>My name is <ph id="0" equiv="INTERPOLATION" disp="&quot;\uFFFD0\uFFFD&quot;"/></source>
      </segment>

This used to be

      <segment>
        <source>My name is <ph id="0" equiv="INTERPOLATION" disp="{{name}};"/></source>
      </segment>

🌍 Your Environment

Angular Version:

Angular CLI: 10.1.0
Node: 12.9.1
OS: win32 x64

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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1001.0
@angular-devkit/build-angular     0.1001.0
@angular-devkit/build-optimizer   0.1001.0
@angular-devkit/build-webpack     0.1001.0
@angular-devkit/core              10.1.0
@angular-devkit/schematics        10.1.0
@ngtools/webpack                  10.1.0
@schematics/angular               10.1.0
@schematics/update                0.1001.0
rxjs                              6.6.2
typescript                        4.0.2
webpack                           4.44.1

[sonukapoor]

Hi, @jaska45 Is this different from the other issue you posted #38711 #38705?

[jaska45]

Yes this is a different issue

…

On Fri, Sep 4, 2020 at 05:22 Sonu Kapoor ***@***.***> wrote: Hi, @jaska45 <https://github.com/jaska45> Is this different from the other issue you posted #38711 <#38711>? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#38711 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACM7TWF5K64MEYQNUEDJRXDSEDL2BANCNFSM4QYDAITQ> .

[petebacondarwin]

This might be fixed by #38645 I will test later today

[petebacondarwin]

Tested locally and #38645 does appear to fix this issue. Running the commands on the above reproduction results in:

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="2.0" xmlns="urn:oasis:names:tc:xliff:document:2.0" srcLang="en-US">
  <file id="ngi18n" original="ng.template">
    <unit id="5078016957909331967">
      <segment>
        <source>My name is <ph id="0" equiv="INTERPOLATION" disp="{{name}}"/></source>
      </segment>
    </unit>
  </file>
</xliff>

[jaska45]

Thank you Pete!

[AndrewKushnir]

FYI, the changes from the mentioned PR were merged to master and will be release within 10.1.1 version. Thank you.

[jaska45]

I tested with 10.1.1. It works if the legacy extractor is used. However if I use the ivy option the disp value is not right.

ng xi18n --format=xlf2 --output-path src/locale --ivy

[petebacondarwin]

@jaska45 - are you talking about the repo you originally posted?

In that project I ran:

ng update @angular/core@next  
ng xi18n --format=xlf2 --output-path src/locale --ivy

And I get the desired output.

[petebacondarwin]

Similarly I did:

ng update @angular/core@10.1.1
ng xi18n --format=xlf2 --output-path src/locale --ivy

And again got what I expected.

Can you clarify how to reproduce the problem?

[jaska45]

I did the same but got wrong result.
I updated to repo and pushed changes.

[petebacondarwin]

I just pulled down your updated repo and re-ran the command. This is what I see in messages.xlf:

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="2.0" xmlns="urn:oasis:names:tc:xliff:document:2.0" srcLang="en-US">
  <file id="ngi18n" original="ng.template">
    <unit id="5078016957909331967">
      <notes>
        <note category="location">src/app/app.component.html:1</note>
      </notes>
      <segment>
        <source>My name is <ph id="0" equiv="INTERPOLATION" disp="{{name}}"/></source>
      </segment>
    </unit>
  </file>
</xliff>

This seems correct to me. Can you check that the correct packages are installed by deleting node_modules and reinstalling?

[jaska45]

You got it right. Did you use Mac? I just tried my repo on Mac and it works. Initially I used Windows 10 where it does not work, even after removing node_modules and reinstalling. I will try on another Windows box.

[jaska45]

I just tried on another Windows and it does not work. I have now tried on two Windows and got the same (wrong) result on both of them. On Mac it works.

[jaska45]

This is the info of my second Windows box.

Angular CLI: 10.1.0
Node: 14.9.0
OS: win32 x64
Angular: 10.1.1

[petebacondarwin]

OK, let me test on Windows. It is probably a path thing

[petebacondarwin]

OK, so it is something to do with the CLI integration... on Windows I get the same problem if I use ng xi18n.
But try the following:

node_modules\.bin\ngc -p tsconfig.app.json
node_modules\.bin\localize-extract -s out-tsc\**\*.js -f xlf2 -o src\locale\messages.xlf

This generates the correct output.

[petebacondarwin]

Perhaps @clydin has some ideas?

[petebacondarwin]

OK, I worked out what is going on. The localize stuff relies upon a FileSystem, which the CLI is mocking up to get everything to work. But... internally the extraction is calling absoluteFrom(), which looks for a "current" FileSystem by calling getFileSystem(). This is a kind of global that should be set via setFileSystem() before running the localize code.

But CLI is not calling this and so the "current" FileSystem is different to the one being passed in and it is converting backslashes to forward slashes in paths. So the source-maps are not being loaded from the fake file system that the CLI is providing.

Arguably the CLI shouldn't have to worry about the "current" FileSystem. I'll look into the best way to fix this...

[Niklas187]

Hey guys, I still have a problem with the "equiv-text" attribute.
I am using the latest tag 10.1.6 from the CLI but some translation messages still have incorrect values.

eg.:
<ng-container i18n="Update @@update"> <b>{{value1}}:</b> current {{value2}} to new {{value3}} </ng-container>

will be extracted as (with --ivy):

        <source>
                <x id="START_BOLD_TEXT" equiv-text="  &lt;b&gt;{{value1"/>
                <x id="INTERPOLATION" equiv-text="b&gt;{{value1"/>:
                <x id="CLOSE_BOLD_TEXT" equiv-text="}:&lt;/b&gt;"/>
                 current <x id="INTERPOLATION_1" equiv-text="t {{value2"/> 
                 to new <x id="INTERPOLATION_2" equiv-text=" to new {{"/>
       </source>

will be extracted as (without --ivy):

        <source>
                <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/>
                <x id="INTERPOLATION" equiv-text="{{value1}}"/>: 
                <x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>
                current <x id="INTERPOLATION_1" equiv-text="{{value2}}"/>
                to new <x id="INTERPOLATION_2" equiv-text="{{value3}}"/>
        </source>

Is this an issue in my code or in the cli extraction command?

Example Repo https://github.com/Niklas187/ng-xi18n-ivy-bug.git

version:

Angular CLI: 10.1.6
Node: 12.16.0
OS: win32 x64

Angular: 10.1.3
... animations, common, compiler, core, forms, 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/cli 10.1.6
@angular/compiler-cli 10.1.5
@schematics/angular 10.1.6
@schematics/update 0.1001.6
rxjs 6.6.3
typescript 4.0.3

[petebacondarwin]

@Niklas187 - I just tried you reproduction - it doesn't include the example in you comment so I added that. These are the results I get (on OS/X not Windows):

Without ivy: (ctype attributes removed for clarity)

<source>
  <x id="START_BOLD_TEXT" equiv-text="&lt;b&gt;"/>
  <x id="INTERPOLATION" equiv-text="{{value1}}"/>:
  <x id="CLOSE_BOLD_TEXT" equiv-text="&lt;/b&gt;"/> current
  <x id="INTERPOLATION_1" equiv-text="{{value2}}"/> to new
  <x id="INTERPOLATION_2" equiv-text="{{value3}}"/>
</source>

With ivy:

<source>
  <x id="START_BOLD_TEXT" equiv-text="&lt;b&gt;{{value1}}"/>
  <x id="INTERPOLATION" equiv-text="{{value1}}"/>:
  <x id="CLOSE_BOLD_TEXT" equiv-text="&lt;/b&gt; "/> current
  <x id="INTERPOLATION_1" equiv-text="{value2}} "/> to new
  <x id="INTERPOLATION_2" equiv-text="{value3}} "/>
</source>

Interestingly this is a bit different from your output but I agree that it is not quite right.

It seems that there is some offsetting going on, which is making the start and end points in the equiv-text appear in the wrong place. I'll need to debug into this but since these equiv-text attributes are primarily to aid the translator's job, it will not be high on my priority list. Hopefully I can take a look at it later next week or the week after.

Also, this issue is a different problem to what this issue was about, so I'll start a new issue to track this.

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