fix(compiler): error when ng-content fallback has translated children (angular#63156)

Fixes that the pipeline wasn't processing the fallback content of `ng-content` for i18n which resulted in a compiler error further down the line.

Fixes angular#63065.

PR Close angular#63156

Author: crisbeto

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

@@ -1045,6 +1045,40 @@ export declare class MyComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<MyComponent, "my-cmp", never, {}, {}, never, never, true, never>;
 }
 
+/****************************************************************************************************
+ * PARTIAL FILE: ng_content_with_i18n_children.js
+ ****************************************************************************************************/
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MyComponent {
+}
+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: "14.0.0", version: "0.0.0-PLACEHOLDER", type: MyComponent, isStandalone: true, selector: "my-component", ngImport: i0, template: `
+    <ng-content>
+      <span i18n="@@MY_ID">a <b>b</b> c</span>
+    </ng-content>
+  `, 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: `
+    <ng-content>
+      <span i18n="@@MY_ID">a <b>b</b> c</span>
+    </ng-content>
+  `,
+                }]
+        }] });
+
+/****************************************************************************************************
+ * PARTIAL FILE: ng_content_with_i18n_children.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class MyComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MyComponent, "my-component", never, {}, {}, never, ["*"], true, never>;
+}
+
 /****************************************************************************************************
  * PARTIAL FILE: last_elem_inside_i18n_block.js
  ****************************************************************************************************/

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

@@ -283,6 +283,20 @@
         }
       ]
     },
+    {
+      "description": "should handle ng-content with i18n children",
+      "inputFiles": [
+        "ng_content_with_i18n_children.ts"
+      ],
+      "expectations": [
+        {
+          "extraChecks": [
+            "verifyPlaceholdersIntegrity",
+            "verifyUniqueConsts"
+          ]
+        }
+      ]
+    },
     {
       "description": "when the last element inside an i18n block has i18n attributes",
       "inputFiles": [

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/ng_content_with_i18n_children.js

@@ -0,0 +1,31 @@
+const $_c0$ = ["*"];
+
+function MyComponent_ProjectionFallback_0_Template(rf, ctx) {
+  if (rf & 1) {
+    $r3$.ɵɵdomElementStart(0, "span");
+    $r3$.ɵɵi18nStart(1, 0);
+    $r3$.ɵɵdomElement(2, "b");
+    $r3$.ɵɵi18nEnd();
+    $r3$.ɵɵdomElementEnd();
+  }
+}
+
+…
+
+$r3$.ɵɵdefineComponent({
+  …
+  ngContentSelectors: $_c0$,
+  decls: 2,
+  vars: 0,
+  consts: () => {
+    __i18nMsg__('a {$startBoldText}b{$closeBoldText} c', [['closeBoldText', String.raw`\uFFFD/#2\uFFFD`], ['startBoldText', String.raw`\uFFFD#2\uFFFD`]], {original_code: {"closeBoldText": "</b>", "startBoldText": "<b>"}}, {id: 'MY_ID'})
+    return [$i18n_0$];
+  },
+  template: function MyComponent_Template(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵprojectionDef();
+      $r3$.ɵɵprojection(0, 0, null, MyComponent_ProjectionFallback_0_Template, 3, 0);
+    }
+  },
+  …
+});

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/ng_content_with_i18n_children.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'my-component',
+  template: `
+    <ng-content>
+      <span i18n="@@MY_ID">a <b>b</b> c</span>
+    </ng-content>
+  `,
+})
+export class MyComponent {}

packages/compiler/src/template/pipeline/ir/src/ops/create.ts

@@ -1147,6 +1147,8 @@ export interface ProjectionOp extends Op<CreateOp>, ConsumesSlotOpTrait {
   sourceSpan: ParseSourceSpan;
 
   fallbackView: XrefId | null;
+
+  fallbackViewI18nPlaceholder?: i18n.BlockPlaceholder;
 }
 
 export function createProjectionOp(

packages/compiler/src/template/pipeline/src/phases/propagate_i18n_blocks.ts

@@ -70,6 +70,16 @@ function propagateI18nBlocksToTemplates(
           );
         }
         break;
+      case ir.OpKind.Projection:
+        if (op.fallbackView !== null) {
+          subTemplateIndex = propagateI18nBlocksForView(
+            unit.job.views.get(op.fallbackView)!,
+            i18nBlock,
+            op.fallbackViewI18nPlaceholder,
+            subTemplateIndex,
+          );
+        }
+        break;
     }
   }
   return subTemplateIndex;

packages/compiler/src/template/pipeline/src/phases/resolve_i18n_element_placeholders.ts

@@ -128,6 +128,38 @@ function resolvePlaceholdersForView(
           // Clear out the pending structural directive now that its been accounted for.
           pendingStructuralDirective = undefined;
         }
+
+        if (op.fallbackView !== null) {
+          const view = job.views.get(op.fallbackView)!;
+          if (op.fallbackViewI18nPlaceholder === undefined) {
+            resolvePlaceholdersForView(job, view, i18nContexts, elements);
+          } else {
+            if (currentOps === null) {
+              throw Error('i18n tag placeholder should only occur inside an i18n block');
+            }
+            recordTemplateStart(
+              job,
+              view,
+              op.handle.slot!,
+              op.fallbackViewI18nPlaceholder,
+              currentOps.i18nContext,
+              currentOps.i18nBlock,
+              pendingStructuralDirective,
+            );
+            resolvePlaceholdersForView(job, view, i18nContexts, elements);
+            recordTemplateClose(
+              job,
+              view,
+              op.handle.slot!,
+              op.fallbackViewI18nPlaceholder,
+              currentOps.i18nContext,
+              currentOps.i18nBlock,
+              pendingStructuralDirective,
+            );
+            pendingStructuralDirective = undefined;
+          }
+        }
+
         break;
       case ir.OpKind.ConditionalCreate:
       case ir.OpKind.ConditionalBranchCreate:

packages/core/test/acceptance/content_spec.ts

@@ -7,6 +7,7 @@
  */
 
 import {CommonModule} from '@angular/common';
+import {loadTranslations} from '@angular/localize';
 import {
   ChangeDetectorRef,
   Component,
@@ -2039,5 +2040,32 @@ describe('projection', () => {
         );
       },
     );
+
+    it('should translate elements inside fallback content', () => {
+      @Component({
+        selector: 'projection',
+        template: `
+          <ng-content>
+            <span i18n="@@MY_ID">a <b>b</b> c</span>
+          </ng-content>
+        `,
+      })
+      class Projection {}
+
+      @Component({
+        imports: [Projection],
+        template: `<projection/>`,
+      })
+      class App {}
+
+      loadTranslations({
+        MY_ID: '1 {$START_BOLD_TEXT}2{$CLOSE_BOLD_TEXT} 3',
+      });
+
+      const fixture = TestBed.createComponent(App);
+      expect(getElementHtml(fixture.nativeElement)).toContain(
+        `<projection><span>1 <b>2</b> 3</span></projection>`,
+      );
+    });
   });
 });