extract-i18n produces file that breaks build (when two tags are embedded inside the translation)

🐞 Bug report

Command (mark with an x)

  • new
  • build
  • serve
  • test
  • e2e
  • generate
  • add
  • update
  • lint
  • extract-i18n
  • run
  • config
  • help
  • version
  • doc

Not sure if it’s the extraction process or the build process

Is this a regression?

I don’t think so – I think it’s been there since localize was introduced

Description

Having a specific combination of tags within the translation unit will produce a translation file that breaks the build. Please see the reproduction section.

🔬 Minimal Reproduction

Since it has to do with localize and building the project, I’m attaching a zipped reproduction.

Having such a piece of HTML:
<div class="some-class" i18n>This breaks build <a href="https://foo.com">One link</a> the second link causes error <a href="https://bar.com">Another link</a></div>

Will produce such translate unit (xlf2, with target duplicated from source):

    <unit id="4984752463945187369">
      <notes>
        <note category="location">src/app/app.component.html:1</note>
      </notes>
      <segment>
        <source>This breaks build <pc id="0" equivStart="START_LINK" equivEnd="CLOSE_LINK" type="link" dispStart="&lt;a href=&quot;https://foo.com&quot;&gt;" dispEnd="&lt;/a&gt;">One link</pc> the second link causes error <pc id="1" equivStart="START_LINK_1" equivEnd="CLOSE_LINK_1" type="other" dispStart="&lt;a href=&quot;https://bar.com&quot;&gt;">Another link</pc></source>
        <target>This breaks build <pc id="0" equivStart="START_LINK" equivEnd="CLOSE_LINK" type="link" dispStart="&lt;a href=&quot;https://foo.com&quot;&gt;" dispEnd="&lt;/a&gt;">One link</pc> the second link causes error <pc id="1" equivStart="START_LINK_1" equivEnd="CLOSE_LINK_1" type="other" dispStart="&lt;a href=&quot;https://bar.com&quot;&gt;">Another link</pc></target>
      </segment>
    </unit>

which then causes the build to fail (ng build –localize) with error message:
There is a placeholder name mismatch with the translation provided for the message "8220418496226875748" ["ae049955b00b7c32e119cf04537cb0de7609cdb2", "4984752463945187369"] ("This breaks build {$START_LINK}One link{$CLOSE_LINK} the second link causes error {$START_LINK_1}Another link{$CLOSE_LINK}"). The translation contains a placeholder with name CLOSE_LINK_1, which does not exist in the message.

When tested with bare tags: <a>Text</a>, without the href attribute, it worked fine.

🔥 Exception or Error


There is a placeholder name mismatch with the translation provided for the message "8220418496226875748" ["ae049955b00b7c32e119cf04537cb0de7609cdb2", "4984752463945187369"] ("This breaks build {$START_LINK}One link{$CLOSE_LINK} the second link causes error {$START_LINK_1}Another link{$CLOSE_LINK}").
The translation contains a placeholder with name CLOSE_LINK_1, which does not exist in the message.

🌍 Your Environment


Angular CLI: 11.0.7
Node: 14.14.0
OS: linux x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.7
@angular-devkit/build-angular   0.1100.7
@angular-devkit/core            11.0.7
@angular-devkit/schematics      11.0.7
@angular/cli                    11.0.7
@schematics/angular             11.0.7
@schematics/update              0.1100.7
rxjs                            6.6.6
typescript                      4.0.7

i18n-tags-bug.tar.gz

1 possible answer(s) on “extract-i18n produces file that breaks build (when two tags are embedded inside the translation)