Revert "fix(compiler): support i18n interpolated only attribute bindi…

…ngs (#43815)" (#43882)

This reverts commit bba0a87.

The reason for rollback: this change is breaking some targets in Google's codebase when there is no attribute value is displayed (attr.aria-label) when translated.

PR Close #43882

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/GOLDEN_PARTIAL.js

@@ -358,66 +358,6 @@ export declare class MyModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<MyModule>;
 }
 
-/****************************************************************************************************
- * PARTIAL FILE: interpolated_attributes.js
- ****************************************************************************************************/
-import { Component, NgModule } from '@angular/core';
-import * as i0 from "@angular/core";
-export class MyComponent {
-    constructor() {
-        this.name = 'Angular';
-    }
-}
-MyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: `
-  <div
-  title="title {{name}}" i18n-title
-  attr.label="label {{name}}" i18n-label="@@id1"
-  attr.lang="lang {{name}}" i18n-attr.lang="@@id2"
-  attr.dir="dir {{name}}" i18n-attr.dir="@@id3" i18n-dir="@@id4"
-  attr.draggable="draggable {{name}}" i18n-draggable="@@id5" i18n-attr.draggable="@@id6">
-  </div>
-  `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'my-component',
-                    template: `
-  <div
-  title="title {{name}}" i18n-title
-  attr.label="label {{name}}" i18n-label="@@id1"
-  attr.lang="lang {{name}}" i18n-attr.lang="@@id2"
-  attr.dir="dir {{name}}" i18n-attr.dir="@@id3" i18n-dir="@@id4"
-  attr.draggable="draggable {{name}}" i18n-draggable="@@id5" i18n-attr.draggable="@@id6">
-  </div>
-  `
-                }]
-        }] });
-export class MyModule {
-}
-MyModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyModule, declarations: [MyComponent] });
-MyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyModule, decorators: [{
-            type: NgModule,
-            args: [{ declarations: [MyComponent] }]
-        }] });
-
-/****************************************************************************************************
- * PARTIAL FILE: interpolated_attributes.d.ts
- ****************************************************************************************************/
-import * as i0 from "@angular/core";
-export declare class MyComponent {
-    name: string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MyComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MyComponent, "my-component", never, {}, {}, never, never>;
-}
-export declare class MyModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<MyModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MyModule, [typeof MyComponent], never, never>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<MyModule>;
-}
-
 /****************************************************************************************************
  * PARTIAL FILE: static_attributes.js
  ****************************************************************************************************/

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/TEST_CASES.json

@@ -99,20 +99,6 @@
         }
       ]
     },
-    {
-      "description": "should create translations for interpolated attributes",
-      "inputFiles": [
-        "interpolated_attributes.ts"
-      ],
-      "expectations": [
-        {
-          "extraChecks": [
-            "verifyPlaceholdersIntegrity",
-            "verifyUniqueConsts"
-          ]
-        }
-      ]
-    },
     {
       "description": "should translate static attributes",
       "inputFiles": [

packages/compiler/src/render3/view/i18n/meta.ts

@@ -16,7 +16,7 @@ import {ParseTreeResult} from '../../../ml_parser/parser';
 import * as o from '../../../output/output_ast';
 import {isTrustedTypesSink} from '../../../schema/trusted_types_sinks';
 
-import {ATTR_BINDING_MATCHER, hasI18nAttrs, I18N_ATTR, I18N_ATTR_PREFIX, icuFromI18nMessage} from './util';
+import {hasI18nAttrs, I18N_ATTR, I18N_ATTR_PREFIX, icuFromI18nMessage} from './util';
 
 export type I18nMeta = {
   id?: string,
@@ -81,7 +81,7 @@ export class I18nMetaVisitor implements html.Visitor {
 
       for (const attr of element.attrs) {
         if (attr.name === I18N_ATTR) {
-          // 'i18n' attribute that marks the element contents as an i18n message
+          // root 'i18n' node attribute
           const i18n = element.i18n || attr.value;
           const message = this._generateI18nMessage(element.children, i18n, setI18nRefs);
           // do not assign empty i18n meta
@@ -107,10 +107,7 @@ export class I18nMetaVisitor implements html.Visitor {
       // set i18n meta for attributes
       if (Object.keys(attrsMeta).length) {
         for (const attr of attrs) {
-          // First try to match the metadata to the attribute name as-is.
-          // If that cannot be found try removing any `attr.` prefix from the attribute name.
-          const meta =
-              attrsMeta[attr.name] ?? attrsMeta[attr.name.replace(ATTR_BINDING_MATCHER, '')];
+          const meta = attrsMeta[attr.name];
           // do not create translation for empty attributes
           if (meta !== undefined && attr.value) {
             attr.i18n = this._generateI18nMessage([attr], attr.i18n || meta);

packages/compiler/src/render3/view/i18n/util.ts

@@ -24,12 +24,6 @@ export const TRANSLATION_VAR_PREFIX = 'i18n_';
 /** Name of the i18n attributes **/
 export const I18N_ATTR = 'i18n';
 export const I18N_ATTR_PREFIX = 'i18n-';
-/**
- * Matches the prefix used when binding to an attribute rather than a property.
- *
- * For example: `[attr.title]="expression"`.
- * */
-export const ATTR_BINDING_MATCHER = /^attr\./i;
 
 /** Prefix of var expressions used in ICUs */
 export const I18N_ICU_VAR_PREFIX = 'VAR_';

packages/compiler/src/render3/view/template.ts

@@ -656,8 +656,7 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
     element.inputs.forEach(input => {
       const stylingInputWasSet = stylingBuilder.registerBoundInput(input);
       if (!stylingInputWasSet) {
-        if ((input.type === BindingType.Property || input.type === BindingType.Attribute) &&
-            input.i18n) {
+        if (input.type === BindingType.Property && input.i18n) {
           boundI18nAttrs.push(input);
         } else {
           allOtherInputs.push(input);

packages/core/test/acceptance/i18n_spec.ts

@@ -1616,27 +1616,6 @@ onlyInIvy('Ivy i18n logic').describe('runtime i18n', () => {
       expect(fixture.nativeElement.innerHTML).toEqual(`<div title="bonjour John"></div>`);
     });
 
-    it('interpolated "attr." bindings', () => {
-      loadTranslations({
-        [computeMsgId('hello {$INTERPOLATION}')]: 'bonjour {$INTERPOLATION}',
-        custom: 'translated-{$INTERPOLATION}'
-      });
-      const fixture = initWithTemplate(AppComp, `
-        <div i18n-attr.title attr.title="hello {{name}}"></div>
-        <div i18n-title attr.title="hello {{name}}"></div>
-        <div i18n-attr.title="@@custom" attr.title="original-{{name}}"></div>
-      `);
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual(
-              `<div title="bonjour Angular"></div><div title="bonjour Angular"></div><div title="translated-Angular"></div>`);
-
-      fixture.componentRef.instance.name = 'John';
-      fixture.detectChanges();
-      expect(fixture.nativeElement.innerHTML)
-          .toEqual(
-              `<div title="bonjour John"></div><div title="bonjour John"></div><div title="translated-John"></div>`);
-    });
-
     it('with pipes', () => {
       loadTranslations({[computeMsgId('hello {$INTERPOLATION}')]: 'bonjour {$INTERPOLATION}'});
       const fixture = initWithTemplate(