angular · alxhub · May 27, 2026 · May 13, 2026 · May 21, 2026 · May 21, 2026
diff --git a/packages/compiler-cli/linker/src/file_linker/partial_linkers/partial_component_linker_1.ts b/packages/compiler-cli/linker/src/file_linker/partial_linkers/partial_component_linker_1.ts
@@ -254,6 +254,7 @@ export class PartialComponentLinkerVersion1<
      i18nUseExternalIds: false,
      declarations,
      hasDirectiveDependencies: !baseMeta.isStandalone || hasDirectiveDependencies,
+      foreignImports: null,
    };
  }


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,6 +39,7 @@ import {
  R3TemplateDependency,
  R3TemplateDependencyKind,
  R3TemplateDependencyMetadata,
+  R3ForeignComponentMetadata,
  SchemaMetadata,
  SelectorlessMatcher,
  SelectorMatcher,
@@ -1023,6 +1024,7 @@ export class ComponentDecoratorHandler implements DecoratorHandler<
          relativeContextFilePath,
          rawImports: rawImports !== null ? new o.WrappedNodeExpr(rawImports) : undefined,
          relativeTemplatePath,
+          foreignImports: null,
        },
        typeCheckMeta: extractDirectiveTypeCheckMeta(node, inputs, this.reflector),
        classMetadata: this.includeClassMetadata
@@ -1495,10 +1497,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));

@@ -1625,10 +1629,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) {
@@ -1688,10 +1694,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());
@@ -2325,6 +2333,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 {name, 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,
+        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/scope/src/typecheck.ts b/packages/compiler-cli/src/ngtsc/scope/src/typecheck.ts
@@ -12,13 +12,13 @@ import {
  SchemaMetadata,
  SelectorlessMatcher,
  SelectorMatcher,
-  ForeignComponentMeta,
 } from '@angular/compiler';

 import {Reference} from '../../imports';
 import {
  DirectiveMeta,
  flattenInheritedDirectiveMetadata,
+  ForeignComponentMeta,
  HostDirectivesResolver,
  MetadataReader,
  MetaKind,

diff --git a/.../test_cases/r3_compiler_compliance/components_and_directives/standalone/GOLDEN_PARTIAL.js b/.../test_cases/r3_compiler_compliance/components_and_directives/standalone/GOLDEN_PARTIAL.js
@@ -375,3 +375,56 @@ export declare class StandaloneComponent {
    static ɵcmp: i0.ɵɵComponentDeclaration<StandaloneComponent, "other-standalone", never, {}, {}, never, never, true, never>;
 }

+/****************************************************************************************************
+ * PARTIAL FILE: foreign_component.js
+ ****************************************************************************************************/
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+export function FancyButton() { }
+// @angular/core does not expose the `ForeignComponent` type this should return. 
+function frameworkImport(component) {
+    return () => { };
+}
+export class TestCmp {
+    title = 'Submit';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: TestCmp, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: TestCmp, isStandalone: true, selector: "main", ngImport: i0, template: `
+    <FancyButton
+      class="btn-cls"
+      unsafe-attr="value"
+      [label]="title"
+      [unsafe-input]="title"
+    />
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: TestCmp, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'main',
+                    template: `
+    <FancyButton
+      class="btn-cls"
+      unsafe-attr="value"
+      [label]="title"
+      [unsafe-input]="title"
+    />
+  `,
+                    // @ts-ignore: @angular/core does not expose the `foreignImports` property.
+                    foreignImports: [
+                        // @ts-ignore: @angular/core does not expose the `ForeignComponent` type this expects.
+                        frameworkImport(FancyButton)
+                    ],
+                }]
+        }] });
+
+/****************************************************************************************************
+ * PARTIAL FILE: foreign_component.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare function FancyButton(): void;
+export declare class TestCmp {
+    title: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TestCmp, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TestCmp, "main", never, {}, {}, never, never, true, never>;
+}
+
diff --git a/...ce/test_cases/r3_compiler_compliance/components_and_directives/standalone/TEST_CASES.json b/...ce/test_cases/r3_compiler_compliance/components_and_directives/standalone/TEST_CASES.json
@@ -3,106 +3,85 @@
  "cases": [
    {
      "description": "should properly compile a standalone component",
-      "inputFiles": [
-        "component.ts"
-      ],
+      "inputFiles": ["component.ts"],
      "expectations": [
        {
          "failureMessage": "Invalid component definition",
-          "files": [
-            "component.js"
-          ]
+          "files": ["component.js"]
        }
      ],
-      "compilationModeFilter": [
-        "full compile",
-        "local compile",
-        "declaration-only emit"
-      ]
+      "compilationModeFilter": ["full compile", "local compile", "declaration-only emit"]
    },
    {
      "description": "should properly compile a standalone directive",
-      "inputFiles": [
-        "directive.ts"
-      ],
+      "inputFiles": ["directive.ts"],
      "expectations": [
        {
          "failureMessage": "Invalid directive definition",
-          "files": [
-            "directive.js"
-          ]
+          "files": ["directive.js"]
        }
      ]
    },
    {
      "description": "should properly compile a standalone pipe",
-      "inputFiles": [
-        "pipe.ts"
-      ],
+      "inputFiles": ["pipe.ts"],
      "expectations": [
        {
          "failureMessage": "Invalid pipe definition",
-          "files": [
-            "pipe.js"
-          ]
+          "files": ["pipe.js"]
        }
      ]
    },
    {
      "description": "should generate dependencies array from imports",
-      "inputFiles": [
-        "imports.ts"
-      ],
+      "inputFiles": ["imports.ts"],
      "expectations": [
        {
          "failureMessage": "Invalid standalone component dependencies",
-          "files": [
-            "imports.js"
-          ]
+          "files": ["imports.js"]
        }
      ]
    },
    {
      "description": "should support recursivity in templates",
-      "inputFiles": [
-        "recursive.ts"
-      ],
+      "inputFiles": ["recursive.ts"],
      "expectations": [
        {
          "failureMessage": "Recursive usage not accounted for",
-          "files": [
-            "recursive.js"
-          ]
+          "files": ["recursive.js"]
        }
      ]
    },
    {
      "description": "should optimize injector imports",
-      "inputFiles": [
-        "module_optimization.ts"
-      ],
+      "inputFiles": ["module_optimization.ts"],
      "expectations": [
        {
          "failureMessage": "Injector imports not optimized",
-          "files": [
-            "module_optimization.js"
-          ]
+          "files": ["module_optimization.js"]
        }
      ]
    },
    {
      "description": "should handle a forwardRef in the imports of a standalone component",
-      "inputFiles": [
-        "forward_ref.ts"
-      ],
+      "inputFiles": ["forward_ref.ts"],
      "expectations": [
        {
          "failureMessage": "Invalid component definition",
-          "files": [
-            "forward_ref.js"
-          ]
+          "files": ["forward_ref.js"]
        }
      ]
+    },
+    {
+      "description": "should properly compile foreign component imports in a standalone component",
+      "inputFiles": ["foreign_component.ts"],
+      "expectations": [
+        {
+          "failureMessage": "Invalid foreign component definition",
+          "files": ["foreign_component.js"]
+        }
+      ],
+      "compilationModeFilter": ["full compile", "local compile"]
    }
  ]
-}
+}
diff --git a/...st_cases/r3_compiler_compliance/components_and_directives/standalone/foreign_component.js b/...st_cases/r3_compiler_compliance/components_and_directives/standalone/foreign_component.js
@@ -0,0 +1,15 @@
+export class TestCmp {
+  // ...
+  static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({
+    type: TestCmp,
+    selectors: [["main"]],
+    decls: 1,
+    vars: 0,
+    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 });
+      }
+    },
+    encapsulation: 2
+  });
+}
diff --git a/...es/r3_compiler_compliance/components_and_directives/standalone/foreign_component.local.js b/...es/r3_compiler_compliance/components_and_directives/standalone/foreign_component.local.js
@@ -0,0 +1,15 @@
+export class TestCmp {
+  // ...
+  static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({
+    type: TestCmp,
+    selectors: [["main"]],
+    decls: 1,
+    vars: 0,
+    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 });
+      }
+    },
+    encapsulation: 2
+  });
+}
diff --git a/...st_cases/r3_compiler_compliance/components_and_directives/standalone/foreign_component.ts b/...st_cases/r3_compiler_compliance/components_and_directives/standalone/foreign_component.ts
@@ -0,0 +1,28 @@
+import {Component} from '@angular/core';
+
+export function FancyButton() {}
+
+// @angular/core does not expose the `ForeignComponent` type this should return. 
+function frameworkImport(component: {}): Function {
+  return () => {};
+}
+
+@Component({
+  selector: 'main',
+  template: `
+    <FancyButton
+      class="btn-cls"
+      unsafe-attr="value"
+      [label]="title"
+      [unsafe-input]="title"
+    />
+  `,
+  // @ts-ignore: @angular/core does not expose the `foreignImports` property.
+  foreignImports: [
+    // @ts-ignore: @angular/core does not expose the `ForeignComponent` type this expects.
+    frameworkImport(FancyButton)
+  ],
+})
+export class TestCmp {
+  title = 'Submit';
+}
diff --git a/packages/compiler/src/jit_compiler_facade.ts b/packages/compiler/src/jit_compiler_facade.ts
@@ -360,6 +360,7 @@ export class CompilerFacadeImpl implements CompilerFacade {
      relativeContextFilePath: '',
      i18nUseExternalIds: true,
      relativeTemplatePath: null,
+      foreignImports: null,
    };
    const jitExpressionSourceMap = `ng:///${facade.name}.js`;
    return this.compileComponentFromMeta(angularCoreEnv, jitExpressionSourceMap, meta);
@@ -717,6 +718,7 @@ function convertDeclareComponentFacadeToMetadata(
    relativeTemplatePath: null,
    hasDirectiveDependencies,
    legacyOptionalChaining: decl.legacyOptionalChaining ?? LEGACY_OPTIONAL_CHAINING_DEFAULT,
+    foreignImports: null,
  };
 }


diff --git a/packages/compiler/src/render3/r3_identifiers.ts b/packages/compiler/src/render3/r3_identifiers.ts
@@ -25,6 +25,8 @@ export class Identifiers {

  static elementEnd: o.ExternalReference = {name: 'ɵɵelementEnd', moduleName: CORE};

+  static foreignComponent: o.ExternalReference = {name: 'ɵɵforeignComponent', moduleName: CORE};
+
  static domElement: o.ExternalReference = {name: 'ɵɵdomElement', moduleName: CORE};
  static domElementStart: o.ExternalReference = {name: 'ɵɵdomElementStart', moduleName: CORE};
  static domElementEnd: o.ExternalReference = {name: 'ɵɵdomElementEnd', moduleName: CORE};