New localize extractor tool: incorrect source/target with plural forms

🐞 bug report

Affected Package

The issue seems to be caused by package @angular/localize

Is this a regression?

No because it’s a new tool, but yes because the old extractor worked.

Description

When using the new extractor tool introduced in https://github.com/angular/angular/pull/32912 (./node_modules/.bin/localize-extract), it seems to create an XLIFF 1.2 file with invalid source when using plural in templates. For example with the following template:

<span i18n>Updated {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago}}</span>

It creates this element

<trans-unit id="5a134dee893586d02bffc9611056b9cadf9abfad" datatype="html">
  <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {{INTERPOLATION} minutes ago}}</source>
  <context-group purpose="location">
    <context context-type="sourcefile">../app/app.component.html</context>
    <context context-type="linenumber">1</context>
  </context-group>
</trans-unit>

If we use the source as a target:

<trans-unit id="5a134dee893586d02bffc9611056b9cadf9abfad" datatype="html">
  <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {{INTERPOLATION} minutes ago}}</source>
  <target>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {{INTERPOLATION} minutes ago}}</target>
  <context-group purpose="location">
    <context context-type="sourcefile">../app/app.component.html</context>
    <context context-type="linenumber">1</context>
  </context-group>
</trans-unit>

Then we can’t build the application:

Error: Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.)
Error: Invalid ICU message. Missing '}'.

🔬 Minimal Reproduction

https://github.com/Chocobozzz/angular-test

🔥 Exception or Error

Error: Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.)
Error: Invalid ICU message. Missing '}'.

🌍 Your Environment

Angular Version:

Angular CLI: 10.1.0-next.4
Node: 12.18.3
OS: linux x64

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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1001.0-next.4
@angular-devkit/build-angular     0.1001.0-next.4
@angular-devkit/build-optimizer   0.1001.0-next.4
@angular-devkit/build-webpack     0.1001.0-next.4
@angular-devkit/core              10.1.0-next.4
@angular-devkit/schematics        10.1.0-next.4
@angular/cli                      10.1.0-next.4
@ngtools/webpack                  10.1.0-next.4
@schematics/angular               10.1.0-next.4
@schematics/update                0.1001.0-next.4
rxjs                              6.6.2
typescript                        3.9.7
webpack                           4.44.1

Anything else relevant?

The issue seems to be {INTERPOLATION}

[petebacondarwin]

Right! I have a plan to work on a migration tool for these purposes when we look at deprecating and removing the legacy ids.

[Chocobozzz]

I tested the latest angular release and it works. Thanks @petebacondarwin for your work on localization, that allowed us to reduce our build time by 10 with reduced localized bundle sizes.