fix(*): removing componentfactory from elements build

ChronosSF · ChronosSF · commit a9295b351f36 · 2026-06-10T17:03:55.000+03:00
diff --git a/projects/igniteui-angular-elements/src/app/create-custom-element.ts b/projects/igniteui-angular-elements/src/app/create-custom-element.ts
@@ -111,7 +111,7 @@ function guardAttributeNames<T>(strategyFactory: IgxCustomNgElementStrategyFacto
 
     // getComponentDef not public, also technically readonly map
     // the key is the non-minified (template) name
-    const inputs: {[P in keyof T]: string} = (strategyFactory.componentFactory as any).componentDef.inputs;
+    const inputs: {[P in keyof T]: string} = (strategyFactory.component as any).ɵcmp.inputs;
 
     for (const key in inputs) {
         const input = inputs[key];
diff --git a/projects/igniteui-angular-elements/src/app/custom-strategy.ts b/projects/igniteui-angular-elements/src/app/custom-strategy.ts
@@ -1,4 +1,4 @@
-import { ApplicationRef, ComponentFactory, ComponentRef, DestroyRef, EventEmitter, Injector, QueryList, Type, ViewContainerRef, reflectComponentType } from '@angular/core';
+import { ApplicationRef, ComponentRef, createComponent, DestroyRef, EnvironmentInjector, EventEmitter, Injector, QueryList, Type, ViewContainerRef, reflectComponentType } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgElement, NgElementStrategyEvent } from '@angular/elements';
 import { fromEvent, Observable } from 'rxjs';
@@ -62,12 +62,12 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
     }
 
     constructor(
-        private _componentFactory: ComponentFactory<any>,
+        private _component: Type<any>,
         private _injector: Injector,
         private _inputMap: Map<string, string>,
         private config: ComponentConfig[],
     ) {
-        super(_componentFactory, _injector, _inputMap);
+        super(_component, _injector, _inputMap);
     }
 
     protected override async initializeComponent(element: HTMLElement) {
@@ -82,16 +82,17 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
         // set componentRef to non-null to prevent DOM moves from re-initializing
         // TODO: Fail handling or cancellation needed?
         (this as any).componentRef = {};
-        const contentChildrenTags = Array.from(element.children).filter(x => this._componentFactory.ngContentSelectors.some(sel => x.matches(sel))).map(x => x.tagName.toLocaleLowerCase());
+        const ngContentSelectors = reflectComponentType(this._component).ngContentSelectors;
+        const contentChildrenTags = Array.from(element.children).filter(x => ngContentSelectors.some(sel => x.matches(sel))).map(x => x.tagName.toLocaleLowerCase());
 
-        // const toBeOrphanedChildren = Array.from(element.children).filter(x => !this._componentFactory.ngContentSelectors.some(sel => x.matches(sel)));
+        // const toBeOrphanedChildren = Array.from(element.children).filter(x => !ngContentSelectors.some(sel => x.matches(sel)));
         // for (const iterator of toBeOrphanedChildren) {
         //     // TODO: special registration OR config for custom
         // }
         let parentInjector: Injector;
         let parentAnchor: ViewContainerRef;
         const parents: WeakRef<IgcNgElement>[] = [];
-        const componentConfig = this.config?.find(x => x.component === this._componentFactory.componentType);
+        const componentConfig = this.config?.find(x => x.component === this._component);
 
         const configParents = componentConfig?.parents
             .map(parentType => this.config.find(x => x.component === parentType))
@@ -148,9 +149,14 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
         const childInjector = Injector.create({ providers: [], parent: (this as any).injector });
         const projectableNodes = extractProjectableNodes(
             element,
-            this._componentFactory.ngContentSelectors,
+            ngContentSelectors as string[],
         );
-        (this as any).componentRef = this._componentFactory.create(childInjector, projectableNodes, element);
+        (this as any).componentRef = createComponent(this._component, {
+            environmentInjector: ((this as any).injector as Injector).get(EnvironmentInjector),
+            elementInjector: childInjector,
+            hostElement: element,
+            projectableNodes,
+        });
         this.setComponentRef((this as any).componentRef);
 
         //we need a name ref on the WC element to be copied down for the purposes of blazor.
@@ -244,7 +250,7 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
             return;
         }
         const componentRef = (this as any).componentRef as ComponentRef<any>;
-        const componentConfig = this.config?.find(x => x.component === this._componentFactory.componentType);
+        const componentConfig = this.config?.find(x => x.component === this._component);
 
         if (value === componentRef.instance[property]) {
             return;
@@ -290,7 +296,7 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
     public override getInputValue(property: string): any {
         let returnValue = super.getInputValue(property);
 
-        const componentConfig = this.config?.find(x => x.component === this._componentFactory.componentType);
+        const componentConfig = this.config?.find(x => x.component === this._component);
         const componentRef = (this as any).componentRef as ComponentRef<any>;
         if (componentRef && componentConfig?.templateProps?.includes(property)) {
             returnValue = this.templateWrapper.getTemplateFunction(returnValue) || returnValue;
@@ -319,7 +325,7 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
         this.schedule.delete(queryName);
         const componentRef = (this as any).componentRef as ComponentRef<any>;
         if (componentRef) {
-            const componentConfig = this.config?.find(x => x.component === this._componentFactory.componentType);
+            const componentConfig = this.config?.find(x => x.component === this._component);
             const query = componentConfig.contentQueries.find(x => x.property === queryName);
             const children = this.runQueryInDOM(this.element, query);
             let childRefs = [];
@@ -391,7 +397,7 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
                 continue;
             }
 
-            const componentType = this._componentFactory.componentType;
+            const componentType = this._component;
             // TODO - look into more cases where query expects a certain base class but gets a subclass.
             // Related to https://github.com/IgniteUI/igniteui-angular/pull/12134#discussion_r983147259
             const contentQueries = parentConfig.contentQueries.filter(x => x.childType === componentType || x.childType === componentConfig.provideAs);
@@ -454,7 +460,7 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
     //#region Handle event args that return reference to components, since they return angular ref and not custom elements.
     /** Sets up listeners for the component's outputs so that the events stream emits the events. */
     protected override initializeOutputs(componentRef: ComponentRef<any>): void {
-        const eventEmitters: Observable<NgElementStrategyEvent>[] = this._componentFactory.outputs.map(
+        const eventEmitters: Observable<NgElementStrategyEvent>[] = reflectComponentType(this._component).outputs.map(
             ({ propName, templateName }) => {
                 const emitter: EventEmitter<any> = componentRef.instance[propName];
                 return emitter.pipe(map((value: any) => ({ name: templateName, value: this.patchOutputComponents(propName, value) })));
@@ -556,6 +562,6 @@ export class IgxCustomNgElementStrategyFactory extends ComponentNgElementStrateg
     }
 
     public override create(injector: Injector) {
-        return new IgxCustomNgElementStrategy(this.componentFactory, injector, this.inputMap, this.config);
+        return new IgxCustomNgElementStrategy(this.component, injector, this.inputMap, this.config);
     }
 }
diff --git a/projects/igniteui-angular-elements/src/app/ng-element-strategy.ts b/projects/igniteui-angular-elements/src/app/ng-element-strategy.ts
@@ -10,9 +10,8 @@
 
 import {
   ApplicationRef,
-  ComponentFactory,
-  ComponentFactoryResolver,
   ComponentRef,
+  EnvironmentInjector,
   EventEmitter,
   Injector,
   NgZone,
@@ -23,6 +22,8 @@ import {
   ɵisViewDirty as isViewDirty,
   ɵmarkForRefresh as markForRefresh,
   OutputRef,
+  reflectComponentType,
+  createComponent,
 } from '@angular/core';
 import {merge, Observable, ReplaySubject} from 'rxjs';
 import {switchMap} from 'rxjs/operators';
@@ -39,25 +40,24 @@ import {
 const DESTROY_DELAY = 10;
 
 /**
- * Factory that creates new ComponentNgElementStrategy instance. Gets the component factory with the
- * constructor's injector's factory resolver and passes that factory to each strategy.
+ * Factory that creates new ComponentNgElementStrategy instance. Uses reflectComponentType
+ * to obtain component metadata and passes the component type to each strategy.
  */
 export class ComponentNgElementStrategyFactory implements NgElementStrategyFactory {
-  componentFactory: ComponentFactory<any>;
+  component: Type<any>;
 
   inputMap = new Map<string, string>();
 
   constructor(component: Type<any>, injector: Injector) {
-    this.componentFactory = injector
-      .get(ComponentFactoryResolver)
-      .resolveComponentFactory(component);
-    for (const input of this.componentFactory.inputs) {
+    this.component = component;
+    const mirror = reflectComponentType(component);
+    for (const input of mirror.inputs) {
       this.inputMap.set(input.propName, input.templateName);
     }
   }
 
   create(injector: Injector) {
-    return new ComponentNgElementStrategy(this.componentFactory, injector, this.inputMap);
+    return new ComponentNgElementStrategy(this.component, injector, this.inputMap);
   }
 }
 
@@ -98,7 +98,7 @@ export class ComponentNgElementStrategy implements NgElementStrategy {
   private cdScheduler: ChangeDetectionScheduler;
 
   constructor(
-    private componentFactory: ComponentFactory<any>,
+    private component: Type<any>,
     private injector: Injector,
     private inputMap: Map<string, string>,
   ) {
@@ -200,9 +200,14 @@ export class ComponentNgElementStrategy implements NgElementStrategy {
     const childInjector = Injector.create({providers: [], parent: this.injector});
     const projectableNodes = extractProjectableNodes(
       element,
-      this.componentFactory.ngContentSelectors,
+      reflectComponentType(this.component).ngContentSelectors as string[],
     );
-    this.componentRef = this.componentFactory.create(childInjector, projectableNodes, element);
+    this.componentRef = createComponent(this.component, {
+      environmentInjector: this.injector.get(EnvironmentInjector),
+      elementInjector: childInjector,
+      hostElement: element,
+      projectableNodes,
+    });
 
     this.initializeInputs();
     this.initializeOutputs(this.componentRef);
@@ -222,7 +227,7 @@ export class ComponentNgElementStrategy implements NgElementStrategy {
 
   /** Sets up listeners for the component's outputs so that the events stream emits the events. */
   protected initializeOutputs(componentRef: ComponentRef<any>): void {
-    const eventEmitters: Observable<NgElementStrategyEvent>[] = this.componentFactory.outputs.map(
+    const eventEmitters: Observable<NgElementStrategyEvent>[] = reflectComponentType(this.component).outputs.map(
       ({propName, templateName}) => {
         const emitter: EventEmitter<any> | OutputRef<any> = componentRef.instance[propName];
         return new Observable((observer) => {
