fix(ivy): use container i18n meta if a message is a single ICU (#33191)

Prior to this commit, metadata defined on ICU container element was not inherited by the ICU if the whole message is a single ICU (for example: `<ng-container i18n="meaning|description@@id">{count, select, ...}</ng-container>). This commit updates the logic to use parent container i18n meta information for the cases when a message consists of a single ICU.

Fixes #33171

PR Close #33191

packages/compiler-cli/test/compliance/r3_view_compiler_i18n_spec.ts

@@ -3385,6 +3385,30 @@ describe('i18n support in the template compiler', () => {
 
       verify(input, output);
     });
+
+    it('should attach metadata in case an ICU represents the whole message', () => {
+      const input = `
+        <div i18n="meaningA|descA@@idA">{count, select, 1 {one} other {more than one}}</div>
+      `;
+
+      const output = String.raw `
+        var $I18N_0$;
+        if (ngI18nClosureMode) {
+            /**
+             * @desc descA
+             * @meaning meaningA
+             */
+            const $MSG_EXTERNAL_idA$$APP_SPEC_TS_1$ = goog.getMsg("{VAR_SELECT, select, 1 {one} other {more than one}}");
+            $I18N_0$ = $MSG_EXTERNAL_idA$$APP_SPEC_TS_1$;
+        }
+        else {
+            $I18N_0$ = $localize \`:meaningA|descA@@idA:{VAR_SELECT, select, 1 {one} other {more than one}}\`;
+        }
+        $I18N_0$ = i0.ɵɵi18nPostprocess($I18N_0$, { "VAR_SELECT": "\uFFFD0\uFFFD" });
+      `;
+
+      verify(input, output);
+    });
   });
 
   describe('errors', () => {

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

@@ -111,7 +111,7 @@ export class I18nMetaVisitor implements html.Visitor {
         element.attrs = attrs;
       }
     }
-    html.visitAll(this, element.children);
+    html.visitAll(this, element.children, element.i18n);
     return element;
   }
 
@@ -127,8 +127,10 @@ export class I18nMetaVisitor implements html.Visitor {
       const icu = icuFromI18nMessage(message);
       icu.name = name;
     } else {
-      // when ICU is a root level translation
-      message = this._generateI18nMessage([expansion], meta);
+      // ICU is a top level message, try to use metadata from container element if provided via
+      // `context` argument. Note: context may not be available for standalone ICUs (without
+      // wrapping element), so fallback to ICU metadata in this case.
+      message = this._generateI18nMessage([expansion], context || meta);
     }
     expansion.i18n = message;
     return expansion;

packages/core/test/acceptance/i18n_spec.ts

@@ -1031,6 +1031,26 @@ onlyInIvy('Ivy i18n logic').describe('runtime i18n', () => {
       expect(fixture.debugElement.nativeElement.innerHTML).toContain('A');
       expect(fixture.debugElement.nativeElement.innerHTML).toContain('B');
     });
+
+    it('should use metadata from container element if a message is a single ICU', () => {
+      loadTranslations({idA: '{VAR_SELECT, select, 1 {un} other {plus d\'un}}'});
+
+      @Component({
+        selector: 'app',
+        template: `
+          <div i18n="@@idA">{count, select, 1 {one} other {more than one}}</div>
+        `
+      })
+      class AppComponent {
+        count = 2;
+      }
+
+      TestBed.configureTestingModule({declarations: [AppComponent]});
+
+      const fixture = TestBed.createComponent(AppComponent);
+      fixture.detectChanges();
+      expect(fixture.debugElement.nativeElement.innerHTML).toContain('plus d\'un');
+    });
   });
 
   describe('should support attributes', () => {