fix(compiler): support foreign components defined outside top-level scope

Currently, the template pipeline directly emits the raw expression for foreign
component definitions (such as `frameworkImport(MyComponent)`) directly into
the body of the generated template function. If a foreign component is defined
inside a local scope or is non-exported (e.g. nested inside a test block), the
emitted template function may not have access to that variable because
`ɵɵdefineComponent` and its template functions are emitted at the top-level
module scope. This previously caused reference errors during template
compilation.

This commit updates the compilation pipeline to instead ingest foreign
component references into the component's `consts` pool. The
`ɵɵforeignComponent` runtime instruction is updated to accept an index into the
constant pool rather than a raw expression. By routing the references through
the `consts` pool, block-scoped classes and variables are appropriately
captured by `ngtsc` without scoping errors, properly supporting nested/local
foreign component usage.

Author: leonsenft

packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/standalone/foreign_component.js

@@ -45,9 +45,10 @@ export class TestCmp {
     selectors: [["main"]],
     decls: 1,
     vars: 0,
+    consts: [frameworkImport(FancyButton)],
     template: function TestCmp_Template(rf, ctx) {
       if (rf & 1) {
-        i0.ɵɵforeignComponent(0, frameworkImport(FancyButton), { class: "btn-cls", "unsafe-attr": "value", label: ctx.title, "unsafe-input": ctx.title });
+        i0.ɵɵforeignComponent(0, 0, { class: "btn-cls", "unsafe-attr": "value", label: ctx.title, "unsafe-input": ctx.title });
       }
     },
     encapsulation: 2
@@ -63,10 +64,11 @@ export class TestCmpChildren {
     selectors: [["main-children"]],
     decls: 4,
     vars: 0,
+    consts: [frameworkImport(FancyButton)],
     template: function TestCmpChildren_Template(rf, ctx) {
       if (rf & 1) {
         i0.ɵɵdomTemplate(0, TestCmpChildren_Icon_0_Template, 2, 0)(1, TestCmpChildren_Description_1_Template, 2, 0)(2, TestCmpChildren_Children_2_Template, 2, 0);
-        i0.ɵɵforeignComponent(3, frameworkImport(FancyButton), { label: ctx.title, icon: i0.ɵɵforeignContent(0), description: i0.ɵɵforeignContent(1), children: i0.ɵɵforeignContent(2) });
+        i0.ɵɵforeignComponent(3, 0, { label: ctx.title, icon: i0.ɵɵforeignContent(0), description: i0.ɵɵforeignContent(1), children: i0.ɵɵforeignContent(2) });
       }
     },
     encapsulation: 2
@@ -82,10 +84,11 @@ export class TestCmpRenderProps {
     selectors: [["main-render-props"]],
     decls: 2,
     vars: 0,
+    consts: [frameworkImport(FancyButton)],
     template: function TestCmpRenderProps_Template(rf, ctx) {
       if (rf & 1) {
         i0.ɵɵdomTemplate(0, TestCmpRenderProps_Items_0_Template, 2, 2);
-        i0.ɵɵforeignComponent(1, frameworkImport(FancyButton), { label: ctx.title, items: i0.ɵɵforeignContentFn(0) });
+        i0.ɵɵforeignComponent(1, 0, { label: ctx.title, items: i0.ɵɵforeignContentFn(0) });
       }
     },
     encapsulation: 2

packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/standalone/foreign_component.local.js

@@ -45,9 +45,10 @@ export class TestCmp {
     selectors: [["main"]],
     decls: 1,
     vars: 0,
+    consts: [frameworkImport(FancyButton)],
     template: function TestCmp_Template(rf, ctx) {
       if (rf & 1) {
-        i0.ɵɵforeignComponent(0, frameworkImport(FancyButton), { class: "btn-cls", "unsafe-attr": "value", label: ctx.title, "unsafe-input": ctx.title });
+        i0.ɵɵforeignComponent(0, 0, { class: "btn-cls", "unsafe-attr": "value", label: ctx.title, "unsafe-input": ctx.title });
       }
     },
     encapsulation: 2
@@ -63,10 +64,11 @@ export class TestCmpChildren {
     selectors: [["main-children"]],
     decls: 4,
     vars: 0,
+    consts: [frameworkImport(FancyButton)],
     template: function TestCmpChildren_Template(rf, ctx) {
       if (rf & 1) {
         i0.ɵɵtemplate(0, TestCmpChildren_Icon_0_Template, 2, 0)(1, TestCmpChildren_Description_1_Template, 2, 0)(2, TestCmpChildren_Children_2_Template, 2, 0);
-        i0.ɵɵforeignComponent(3, frameworkImport(FancyButton), { label: ctx.title, icon: i0.ɵɵforeignContent(0), description: i0.ɵɵforeignContent(1), children: i0.ɵɵforeignContent(2) });
+        i0.ɵɵforeignComponent(3, 0, { label: ctx.title, icon: i0.ɵɵforeignContent(0), description: i0.ɵɵforeignContent(1), children: i0.ɵɵforeignContent(2) });
       }
     },
     encapsulation: 2
@@ -82,10 +84,11 @@ export class TestCmpRenderProps {
     selectors: [["main-render-props"]],
     decls: 2,
     vars: 0,
+    consts: [frameworkImport(FancyButton)],
     template: function TestCmpRenderProps_Template(rf, ctx) {
       if (rf & 1) {
         i0.ɵɵtemplate(0, TestCmpRenderProps_Items_0_Template, 2, 2);
-        i0.ɵɵforeignComponent(1, frameworkImport(FancyButton), { label: ctx.title, items: i0.ɵɵforeignContentFn(0) });
+        i0.ɵɵforeignComponent(1, 0, { label: ctx.title, items: i0.ɵɵforeignContentFn(0) });
       }
     },
     encapsulation: 2

packages/compiler/src/template/pipeline/src/ingest.ts

@@ -380,8 +380,9 @@ function ingestElement(unit: ViewCompilationUnit, element: t.Element): void {
     // Foreign components are created in the creation block. Updates are triggered reactively
     // through directly passed signal properties, alleviating the need for any explicit update
     // operations.
+    const constIndex = unit.job.addConst(foreignComp.component);
     unit.create.push(
-      ir.createForeignComponentOp(id, foreignComp.component, props, element.startSourceSpan),
+      ir.createForeignComponentOp(id, o.literal(constIndex), props, element.startSourceSpan),
     );
     return;
   }

packages/core/src/render3/instructions/foreign_component.ts

@@ -25,23 +25,25 @@ import {createAndRenderEmbeddedLView} from '../view_manipulation';
 import {collectNativeNodes} from '../collect_native_nodes';
 import {assertLContainer} from '../assert';
 import {CONTAINER_HEADER_OFFSET, LContainer, LContainerFlags} from '../interfaces/container';
+import {getConstant} from '../util/view_utils';
 
 /**
  * Creation phase instruction to render a foreign component.
  *
  * @param index The index of the container in the data array.
- * @param foreignComponent The matched foreign component.
+ * @param foreignComponentIndex The index of the matched foreign component in the constant pool.
  * @param props Aggregate properties and static attributes.
  * @codeGenApi
  */
 export function ɵɵforeignComponent(
   index: number,
-  foreignComponent: ForeignComponent<any>,
+  foreignComponentIndex: number,
   props?: any,
 ): void {
   const lView = getLView();
   const tView = getTView();
   const adjustedIndex = index + HEADER_OFFSET;
+  const foreignComponent = getConstant<ForeignComponent<any>>(tView.consts, foreignComponentIndex)!;
 
   // 1. Get or create TNode for this container slot
   let tNode: TContainerNode;

packages/core/test/acceptance/foreign_component/foreign_component_spec.ts

@@ -23,29 +23,6 @@ function FancyButton(props: {children: Node[]}): Node[] {
   return [button];
 }
 
-// TODO: support this inline.
-function InnerComp(props: {renderHeader: (innerMsg: string) => Node[]; children: Node[]}): Node[] {
-  const inner = document.createElement('div');
-  inner.className = 'inner';
-
-  const headerDiv = document.createElement('div');
-  headerDiv.className = 'inner-header';
-  const headerNodes = props.renderHeader('Inner Msg');
-  for (const child of headerNodes) {
-    headerDiv.appendChild(child);
-  }
-  inner.appendChild(headerDiv);
-
-  const bodyDiv = document.createElement('div');
-  bodyDiv.className = 'inner-body';
-  for (const child of props.children) {
-    bodyDiv.appendChild(child);
-  }
-  inner.appendChild(bodyDiv);
-
-  return [inner];
-}
-
 describe('foreign components', () => {
   describe('content projection', () => {
     it('should update foreign content', async () => {
@@ -483,6 +460,31 @@ describe('foreign components', () => {
         return [outer];
       }
 
+      function InnerComp(props: {
+        renderHeader: (innerMsg: string) => Node[];
+        children: Node[];
+      }): Node[] {
+        const inner = document.createElement('div');
+        inner.className = 'inner';
+
+        const headerDiv = document.createElement('div');
+        headerDiv.className = 'inner-header';
+        const headerNodes = props.renderHeader('Inner Msg');
+        for (const child of headerNodes) {
+          headerDiv.appendChild(child);
+        }
+        inner.appendChild(headerDiv);
+
+        const bodyDiv = document.createElement('div');
+        bodyDiv.className = 'inner-body';
+        for (const child of props.children) {
+          bodyDiv.appendChild(child);
+        }
+        inner.appendChild(bodyDiv);
+
+        return [inner];
+      }
+
       @Component({
         selector: 'test-cmp',
         template: `