angular · leonsenft · May 11, 2026 · May 13, 2026
diff --git a/goldens/public-api/compiler-cli/error_code.api.md b/goldens/public-api/compiler-cli/error_code.api.md
@@ -55,6 +55,7 @@ export enum ErrorCode {
     DUPLICATE_DECORATED_PROPERTIES = 1012,
     DUPLICATE_VARIABLE_DECLARATION = 8006,
     FORBIDDEN_REQUIRED_INITIALIZER_INVOCATION = 8118,
+    FOREIGN_COMPONENT_UNSUPPORTED_BINDING = 8025,
     FORM_FIELD_UNSUPPORTED_BINDING = 8022,
     HOST_BINDING_PARSE_ERROR = 5001,
     HOST_DIRECTIVE_COMPONENT = 2015,

diff --git a/packages/compiler-cli/src/ngtsc/annotations/component/src/handler.ts b/packages/compiler-cli/src/ngtsc/annotations/component/src/handler.ts
@@ -39,10 +39,13 @@ import {
   R3TemplateDependency,
   R3TemplateDependencyKind,
   R3TemplateDependencyMetadata,
+  R3ForeignComponentMetadata,
   SchemaMetadata,
   SelectorlessMatcher,
   SelectorMatcher,
   TmplAstDeferredBlock,
+  TmplAstNode,
+  TmplAstElement,
   TypeCheckId,
   ViewEncapsulation,
 } from '@angular/compiler';
@@ -85,6 +88,7 @@ import {
   PipeMeta,
   Resource,
   ResourceRegistry,
+  createForeignComponentMatcher,
 } from '../../../metadata';
 import {PartialEvaluator} from '../../../partial_evaluator';
 import {PerfEvent, PerfRecorder} from '../../../perf';
@@ -180,6 +184,7 @@ import {
   ComponentAnalysisData,
   ComponentResolutionData,
   DeferredComponentDependency,
+  ForeignComponentMeta,
 } from './metadata';
 import {
   _extractTemplateStyleUrls,
@@ -607,7 +612,7 @@ export class ComponentDecoratorHandler implements DecoratorHandler<
     }
 
     let resolvedImports: Reference<ClassDeclaration>[] | null = null;
-    let foreignImports: Reference<ClassDeclaration>[] | null = null;
+    let foreignImports: ForeignComponentMeta[] | null = null;
     let resolvedDeferredImports: Reference<ClassDeclaration>[] | null = null;
 
     let rawImports: ts.Expression | null = component.get('imports') ?? null;
@@ -1206,7 +1211,10 @@ export class ComponentDecoratorHandler implements DecoratorHandler<
       return;
     }
 
-    const binder = new R3TargetBinder<TypeCheckableDirectiveMeta>(scope.matcher);
+    const binder = new R3TargetBinder<TypeCheckableDirectiveMeta>(
+      scope.matcher,
+      scope.foreignMatcher,
+    );
     const templateContext: TemplateContext = {
       nodes: meta.template.diagNodes,
       pipes: scope.pipes,
@@ -1490,10 +1498,12 @@ export class ComponentDecoratorHandler implements DecoratorHandler<
       ? this.resolveAllDeferredDependencies(resolution)
       : null;
     const defer = this.compileDeferBlocks(resolution);
+    const foreignImports = this.resolveForeignComponentImports(node, analysis);
     const meta: R3ComponentMetadata<R3TemplateDependency> = {
       ...analysis.meta,
       ...resolution,
       defer,
+      foreignImports,
     };
     const fac = compileNgFactoryDefField(toFactoryMetadata(meta, FactoryTarget.Component));
 
@@ -1620,10 +1630,12 @@ export class ComponentDecoratorHandler implements DecoratorHandler<
     const deferrableTypes = this.canDeferDeps ? analysis.explicitlyDeferredTypes : null;
 
     const defer = this.compileDeferBlocks(resolution);
+    const foreignImports = this.resolveForeignComponentImports(node, analysis);
     const meta = {
       ...analysis.meta,
       ...resolution,
       defer,
+      foreignImports,
     } as R3ComponentMetadata<R3TemplateDependency>;
 
     if (deferrableTypes !== null) {
@@ -1683,10 +1695,12 @@ export class ComponentDecoratorHandler implements DecoratorHandler<
     // Create a brand-new constant pool since there shouldn't be any constant sharing.
     const pool = new ConstantPool();
     const defer = this.compileDeferBlocks(resolution);
+    const foreignImports = this.resolveForeignComponentImports(node, analysis);
     const meta: R3ComponentMetadata<R3TemplateDependency> = {
       ...analysis.meta,
       ...resolution,
       defer,
+      foreignImports,
     };
     const fac = compileNgFactoryDefField(toFactoryMetadata(meta, FactoryTarget.Component));
     const def = compileComponentFromMetadata(meta, pool, this.getNewBindingParser());
@@ -1810,7 +1824,10 @@ export class ComponentDecoratorHandler implements DecoratorHandler<
     }
 
     // Set up the R3TargetBinder.
-    const binder = new R3TargetBinder(createMatcherFromScope(scope, this.hostDirectivesResolver));
+    const binder = new R3TargetBinder(
+      createMatcherFromScope(scope, this.hostDirectivesResolver),
+      createForeignComponentMatcher(analysis.foreignImports),
+    );
     let allDependencies = dependencies;
     let deferBlockBinder = binder;
 
@@ -2317,6 +2334,33 @@ export class ComponentDecoratorHandler implements DecoratorHandler<
     this.cycleAnalyzer.recordSyntheticImport(origin, imported);
   }
 
+  /**
+   * Resolves imported foreign components for code generation.
+   */
+  private resolveForeignComponentImports(
+    node: ClassDeclaration,
+    analysis: Readonly<ComponentAnalysisData>,
+  ): R3ForeignComponentMetadata[] | null {
+    if (analysis.foreignImports === null || analysis.foreignImports.length === 0) {
+      return null;
+    }
+    const context = getSourceFile(node);
+
+    return analysis.foreignImports.map((foreignMeta) => {
+      const {ref, rawExpression} = foreignMeta;
+
+      const emittedRef = this.refEmitter.emit(ref, context);
+      assertSuccessfulReferenceEmit(emittedRef, node.name, 'foreign component');
+
+      ts.setEmitFlags(rawExpression, ts.EmitFlags.NoComments | ts.EmitFlags.NoNestedComments);
+
+      return {
+        name: foreignMeta.name,
+        component: new o.WrappedNodeExpr(rawExpression),
+      } satisfies R3ForeignComponentMetadata;
+    });
+  }
+
   /**
    * Resolves information about defer blocks dependencies to make it
    * available for the final `compile` step.

diff --git a/packages/compiler-cli/src/ngtsc/annotations/component/src/metadata.ts b/packages/compiler-cli/src/ngtsc/annotations/component/src/metadata.ts
@@ -19,16 +19,19 @@ import {
   SchemaMetadata,
   TmplAstDeferredBlock,
   ClassPropertyMapping,
+  SelectorlessMatcher,
 } from '@angular/compiler';
 import ts from 'typescript';
 
 import {Reference} from '../../../imports';
 import {
   DirectiveResources,
   DirectiveTypeCheckMeta,
+  ForeignComponentMeta,
   HostDirectiveMeta,
   InputMapping,
 } from '../../../metadata';
+export {ForeignComponentMeta} from '../../../metadata';
 import {ClassDeclaration, Import} from '../../../reflection';
 import {SubsetOfKeys} from '../../../util/src/typescript';
 
@@ -92,7 +95,7 @@ export interface ComponentAnalysisData {
 
   rawImports: ts.Expression | null;
   resolvedImports: Reference<ClassDeclaration>[] | null;
-  foreignImports: Reference<ClassDeclaration>[] | null;
+  foreignImports: ForeignComponentMeta[] | null;
   rawDeferredImports: ts.Expression | null;
   resolvedDeferredImports: Reference<ClassDeclaration>[] | null;
 

diff --git a/packages/compiler-cli/src/ngtsc/annotations/component/src/util.ts b/packages/compiler-cli/src/ngtsc/annotations/component/src/util.ts
@@ -25,6 +25,7 @@ import {
   isNamedFunctionDeclaration,
 } from '../../../reflection';
 import {createValueHasWrongTypeError, getOriginNodeForDiagnostics} from '../../common';
+import {ForeignComponentMeta} from './metadata';
 
 /**
  * Collect the animation names from the static evaluation result.
@@ -167,10 +168,10 @@ export function validateAndFlattenForeignImports(
   imports: ResolvedValue,
   expr: ts.Expression,
 ): {
-  foreignImports: Reference<ClassDeclaration>[];
+  foreignImports: ForeignComponentMeta[];
   diagnostics: ts.Diagnostic[];
 } {
-  const flattened: Reference<ClassDeclaration>[] = [];
+  const flattened: ForeignComponentMeta[] = [];
   const errorMessage = `'foreignImports' must be an array of ForeignComponents.`;
 
   if (!Array.isArray(imports)) {
@@ -199,8 +200,15 @@ export function validateAndFlattenForeignImports(
         validateAndFlattenForeignImports(ref, refExpr);
       flattened.push(...childForeignImports);
       diagnostics.push(...childDiagnostics);
-    } else if (ref instanceof Reference && isNamedFunctionDeclaration(ref.node)) {
-      flattened.push(ref as Reference<ClassDeclaration>);
+    } else if (
+      ref instanceof Reference &&
+      (isNamedFunctionDeclaration(ref.node) || isNamedClassDeclaration(ref.node))
+    ) {
+      flattened.push({
+        name: ref.node.name.getText(),
+        ref: ref as Reference<ClassDeclaration>,
+        rawExpression: refExpr,
+      });
     } else {
       const {node: diagnosticNode, value: diagnosticValue} = getDiagnosticOrigin(
         ref,

diff --git a/packages/compiler-cli/src/ngtsc/annotations/component/test/component_spec.ts b/packages/compiler-cli/src/ngtsc/annotations/component/test/component_spec.ts
@@ -1064,6 +1064,7 @@ runInEachFileSystem(() => {
               import {foreignImport} from '@angular/core/src/render3/foreign_import';
 
               function FancyButton() {}
+              function FancyMenu() {}
 
               function frameworkImport(component: unknown) {
                 return foreignImport(() => {/* render component */});
@@ -1072,7 +1073,10 @@ runInEachFileSystem(() => {
               @Component({
                 selector: 'main',
                 template: '',
-                foreignImports: [frameworkImport(FancyButton)],
+                foreignImports: [
+                  frameworkImport(FancyButton),
+                  frameworkImport(FancyMenu),
+                ],
               }) class TestCmp {}
             `,
           },
@@ -1089,8 +1093,9 @@ runInEachFileSystem(() => {
         const {analysis, diagnostics} = handler.analyze(TestCmp, detected.metadata);
 
         expect(diagnostics).toBeUndefined();
-        expect(analysis?.foreignImports?.length).toBe(1);
-        expect(analysis?.foreignImports![0].node.name.text).toBe('FancyButton');
+        expect(analysis?.foreignImports).toHaveSize(2);
+        expect(analysis!.foreignImports![0].name).toBe('FancyButton');
+        expect(analysis!.foreignImports![1].name).toBe('FancyMenu');
       });
 
       it('should produce diagnostic for imports in non-standalone component', () => {

diff --git a/packages/compiler-cli/src/ngtsc/diagnostics/src/error_code.ts b/packages/compiler-cli/src/ngtsc/diagnostics/src/error_code.ts
@@ -459,6 +459,11 @@ export enum ErrorCode {
    */
   CONFLICTING_HOST_DIRECTIVE_BINDING = -8024,
 
+  /**
+   * Raised when a foreign component node has an unsupported Angular binding.
+   */
+  FOREIGN_COMPONENT_UNSUPPORTED_BINDING = 8025,
+
   /**
    * A two way binding in a template has an incorrect syntax,
    * parentheses outside brackets. For example:

diff --git a/packages/compiler-cli/src/ngtsc/metadata/index.ts b/packages/compiler-cli/src/ngtsc/metadata/index.ts
@@ -22,6 +22,7 @@ export {
   hasInjectableFields,
   CompoundMetadataReader,
   isHostDirectiveMetaForGlobalMode,
+  createForeignComponentMatcher,
 } from './src/util';
 export {ExportedProviderStatusResolver} from './src/providers';
 export {HostDirectivesResolver} from './src/host_directives_resolver';
diff --git a/packages/compiler-cli/src/ngtsc/metadata/src/api.ts b/packages/compiler-cli/src/ngtsc/metadata/src/api.ts
@@ -16,12 +16,19 @@ import {
   InputOrOutput,
   ClassPropertyMapping,
   TemplateGuardMeta,
+  ForeignComponentMeta as T2ForeignComponentMeta,
 } from '@angular/compiler';
 import ts from 'typescript';
 
 import {Reference} from '../../imports';
 import {ClassDeclaration} from '../../reflection';
 
+/** Metadata for a resolved foreign component import. */
+export interface ForeignComponentMeta extends T2ForeignComponentMeta {
+  ref: Reference<ClassDeclaration>;
+  rawExpression: ts.Expression;
+}
+
 /**
  * Metadata collected for an `NgModule`.
  */
@@ -256,7 +263,7 @@ export interface DirectiveMeta extends T2DirectiveMeta, DirectiveTypeCheckMeta {
    * Note that while a foreign import is not likely to be a class, this type is used
    * because it includes the expected identifier we'll need, making further code simpler.
    */
-  foreignImports: Reference<ClassDeclaration>[] | null;
+  foreignImports: ForeignComponentMeta[] | null;
 
   /**
    * Node declaring the `imports` of a standalone component. Used to produce diagnostics.

diff --git a/packages/compiler-cli/src/ngtsc/metadata/src/util.ts b/packages/compiler-cli/src/ngtsc/metadata/src/util.ts
@@ -29,9 +29,15 @@ import {
   MetadataReader,
   NgModuleMeta,
   PipeMeta,
+  ForeignComponentMeta,
 } from './api';
 import {TypeEntityToDeclarationError} from '../../reflection/src/typescript';
-import {ClassPropertyMapping, ClassPropertyName, TemplateGuardMeta} from '@angular/compiler';
+import {
+  ClassPropertyMapping,
+  ClassPropertyName,
+  TemplateGuardMeta,
+  SelectorlessMatcher,
+} from '@angular/compiler';
 
 export function extractReferencesFromType(
   checker: ts.TypeChecker,
@@ -355,3 +361,17 @@ export function isHostDirectiveMetaForGlobalMode(
 ): hostDirectiveMeta is HostDirectiveMetaForGlobalMode {
   return hostDirectiveMeta.directive instanceof Reference;
 }
+
+/** Extracts foreign component names from foreignImports and creates a SelectorlessMatcher. */
+export function createForeignComponentMatcher(
+  foreignImports: ForeignComponentMeta[] | null,
+): SelectorlessMatcher<ForeignComponentMeta> | null {
+  if (foreignImports === null || foreignImports.length === 0) {
+    return null;
+  }
+  const registry = new Map<string, ForeignComponentMeta[]>();
+  for (const meta of foreignImports) {
+    registry.set(meta.name, [meta]);
+  }
+  return new SelectorlessMatcher(registry);
+}
diff --git a/packages/compiler-cli/src/ngtsc/scope/src/typecheck.ts b/packages/compiler-cli/src/ngtsc/scope/src/typecheck.ts
@@ -18,11 +18,13 @@ import {Reference} from '../../imports';
 import {
   DirectiveMeta,
   flattenInheritedDirectiveMetadata,
+  ForeignComponentMeta,
   HostDirectivesResolver,
   MetadataReader,
   MetaKind,
   NgModuleMeta,
   PipeMeta,
+  createForeignComponentMatcher,
 } from '../../metadata';
 import {ClassDeclaration} from '../../reflection';
 import {ComponentScopeKind, ComponentScopeReader, SelectorlessScope} from './api';
@@ -37,6 +39,11 @@ export interface TypeCheckScope {
    */
   matcher: DirectiveMatcher<DirectiveMeta> | null;
 
+  /**
+   * A `SelectorlessMatcher` instance that contains matched foreign components.
+   */
+  foreignMatcher: SelectorlessMatcher<ForeignComponentMeta> | null;
+
   /**
    * All of the directives available in the compilation scope of the declaring NgModule.
    */
@@ -100,6 +107,7 @@ export class TypeCheckScopeRegistry {
     if (scope === null) {
       return {
         matcher: null,
+        foreignMatcher: null,
         directives,
         pipes,
         schemas: [],
@@ -152,8 +160,12 @@ export class TypeCheckScopeRegistry {
       }
     }
 
+    const foreignMatcher =
+      hostMeta !== null ? createForeignComponentMatcher(hostMeta.foreignImports) : null;
+
     const typeCheckScope: TypeCheckScope = {
       matcher,
+      foreignMatcher,
       directives,
       pipes,
       schemas: scope.schemas,

diff --git a/packages/compiler-cli/src/ngtsc/typecheck/api/checker.ts b/packages/compiler-cli/src/ngtsc/typecheck/api/checker.ts
@@ -8,6 +8,7 @@
 
 import {
   AST,
+  ForeignComponentMeta,
   LiteralPrimitive,
   ParseSourceSpan,
   PropertyRead,
@@ -333,6 +334,14 @@ export interface TemplateTypeChecker {
     node: TmplAstElement | TmplAstTemplate,
   ): TypeCheckableDirectiveMeta[] | null;
 
+  /**
+   * Gets the foreign component that matched the given template element.
+   */
+  getForeignComponent(
+    component: ts.ClassDeclaration,
+    element: TmplAstElement,
+  ): ForeignComponentMeta | null;
+
   /**
    * Gets the directives that have been used in a component's template.
    */