Repository: angular
Issue: i18n doesn't play nicely with interpolated attr.attr-name
Labels: type: bug/fix,area: i18n,P3

### Which @angular/* package(s) are the source of the bug?

compiler, localize

### Is this a regression?

Yes

### Description

i18n doesn't produce the output I'd expect when used on an `attr.attr-name` attribute. My hope here is to be able to translate interpolated aria attributes, e.g.: `<elem attr.aria-label="some {{interpolated}} text" i18n-attr.aria-label></elem>` -- which I am trying to use because Angular rejects an interpolated `aria-label` without the `attr.`. My example here uses `title` instead of `aria-label` just so I can provide more "working" variations.

1. Create a new project with the CLI and `ng add @angular/localize`.

2. Put the following in app.component.html
```html
<p title="case 1" i18n-title="@@case1">case 1</p>
<p title="case {{2}}" i18n-title="@@case2">case 2</p>
<p attr.title="case 3" i18n-attr.title="@@case3">case 3</p>
<p attr.title="case {{4}}" i18n-attr.title="@@case4">case 4</p>
```

3. Run `npm start` and visit in a browser.

I see the following rendered markup:
```html
<app-root _nghost-bks-c11="" ng-version="12.2.2">
  <p _ngcontent-bks-c11="" title="case 1">case 1</p>
  <p _ngcontent-bks-c11="" title="case 2">case 2</p>
  <p _ngcontent-bks-c11="" attr.title="case 3">case 3</p>
  <p _ngcontent-bks-c11="">case 4</p>
</app-root>
```

The `title` attribute is misnamed `attr.title` in case 3 and is omitted in case 4.

I would expect the following instead:
```html
<app-root _nghost-bks-c11="" ng-version="12.2.2">
  <p _ngcontent-bks-c11="" title="case 1">case 1</p>
  <p _ngcontent-bks-c11="" title="case 2">case 2</p>
  <p _ngcontent-bks-c11="" title="case 3">case 3</p>
  <p _ngcontent-bks-c11="" title="case 4">case 4</p>
</app-root>
```

v11.2.14 with Ivy enabled gives the same output as v12. With Ivy disabled, case 4 has a `title` attribute as expected. Case 3 still has `attr.title` in the output either way.  (Case 3 is output as a literal `attr.title` even without i18n; am I misunderstanding how `attr.` is supposed to work, or is that wrong as well?)

4. Run `ng extract-i18n`

In the resulting messages.xlf file, case 4 is missing. I tried this with Angular v11.2.14 and if ivy is disabled, it gives the expected result (all four cases present); if ivy is enabled, case 4 is missing.

v12 and v11 with Ivy enabled:
```xml
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en-US" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="case1" datatype="html">
        <source>case 1</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">1</context>
        </context-group>
      </trans-unit>
      <trans-unit id="case2" datatype="html">
        <source>case <x id="INTERPOLATION" equiv-text="{{2}}"/></source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">2</context>
        </context-group>
      </trans-unit>
      <trans-unit id="case3" datatype="html">
        <source>case 3</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">3</context>
        </context-group>
      </trans-unit>
    </body>
  </file>
</xliff>
```

v11 with Ivy disabled:
```xml
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en-US" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="case1" datatype="html">
        <source>case 1</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">1</context>
        </context-group>
      </trans-unit>
      <trans-unit id="case2" datatype="html">
        <source>case <x id="INTERPOLATION" equiv-text="{{2}}"/></source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">2</context>
        </context-group>
      </trans-unit>
      <trans-unit id="case3" datatype="html">
        <source>case 3</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">3</context>
        </context-group>
      </trans-unit>
      <trans-unit id="case4" datatype="html">
        <source>case <x id="INTERPOLATION" equiv-text="{{4}}"/></source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">4</context>
        </context-group>
      </trans-unit>
    </body>
  </file>
</xliff>
```

---

And of course if it worked up to this point, I'd try including translations for case 3/4 and check that they were replaced like other attributes with i18n.

### Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-ivy-tp6jnh?file=src%2Fapp%2Fapp.component.html

### Please provide the exception or error you saw

_No response_

### Please provide the environment you discovered this bug in

```true
Angular: 12.2.2
default packages (from ng new) + @angular/localize
```


### Anything else?

_No response_