chore(*): making elements work with new ng underlying code

Author: ChronosSF

projects/igniteui-angular-elements/src/app/create-custom-element.ts

@@ -1,4 +1,4 @@
-import { Type } from '@angular/core';
+import { reflectComponentType, Type } from '@angular/core';
 import { createCustomElement, NgElementConfig, NgElementConstructor } from '@angular/elements';
 import { FilteringExpressionsTree, FilteringLogic, IgxBooleanFilteringOperand, IgxDateFilteringOperand, IgxDateTimeFilteringOperand, IgxGridComponent, IgxNumberFilteringOperand, IgxStringFilteringOperand, IgxTimeFilteringOperand } from 'igniteui-angular';
 import { ComponentConfig } from './component-config';
@@ -9,7 +9,7 @@ export type IgxNgElementConfig = Omit<NgElementConfig, 'strategyFactory'> & { re
 type IgxElementConstructor<T> = NgElementConstructor<T> & { tagName: string};
 
 export function createIgxCustomElement<T>(component: Type<T>, config: IgxNgElementConfig): IgxElementConstructor<T> {
-    const strategyFactory = new IgxCustomNgElementStrategyFactory(component, config.injector, config.registerConfig);
+    const strategyFactory = new IgxCustomNgElementStrategyFactory(component, config.registerConfig);
 
     guardAttributeNames<T>(strategyFactory);
 
@@ -111,10 +111,10 @@ 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.component as any).ɵcmp.inputs;
+    const inputs = reflectComponentType((strategyFactory as any).component).inputs;
 
-    for (const key in inputs) {
-        const input = inputs[key];
+    inputs.forEach((input) => {
+        const key = input.templateName;
         // detect consecutive capital letters in `templateName` and lower a portion of them
         if (/[A-Z]{2,}/.test(key)) {
             // showPivotConfigurationUI -> showPivotConfigurationUi -> show-pivot-configuration-ui
@@ -126,5 +126,5 @@ function guardAttributeNames<T>(strategyFactory: IgxCustomNgElementStrategyFacto
             inputs[newKey] = input;
             // TODO: consider deleting the original key
         }
-    }
+    });
 }

projects/igniteui-angular-elements/src/app/custom-strategy.ts

@@ -1,4 +1,4 @@
-import { ApplicationRef, ComponentRef, createComponent, DestroyRef, EnvironmentInjector, EventEmitter, Injector, QueryList, Type, ViewContainerRef, reflectComponentType } from '@angular/core';
+import { ComponentRef, createComponent, DestroyRef, 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';
@@ -82,8 +82,10 @@ 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 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 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 => !ngContentSelectors.some(sel => x.matches(sel)));
         // for (const iterator of toBeOrphanedChildren) {
@@ -149,10 +151,10 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
         const childInjector = Injector.create({ providers: [], parent: (this as any).injector });
         const projectableNodes = extractProjectableNodes(
             element,
-            ngContentSelectors as string[],
+            ngContentSelectors,
         );
         (this as any).componentRef = createComponent(this._component, {
-            environmentInjector: ((this as any).injector as Injector).get(EnvironmentInjector),
+            environmentInjector: (this as any).injector,
             elementInjector: childInjector,
             hostElement: element,
             projectableNodes,
@@ -557,8 +559,8 @@ export class IgxCustomNgElementStrategyFactory extends ComponentNgElementStrateg
      * @param injector The injector for the component
      * @param config Additional component hierarchy configuration
      */
-    constructor(component: Type<any>, injector: Injector, private config: ComponentConfig[]) {
-        super(component, injector);
+    constructor(component: Type<any>, private config: ComponentConfig[]) {
+        super(component);
     }
 
     public override create(injector: Injector) {

projects/igniteui-angular-elements/src/app/ng-element-strategy.ts

@@ -24,6 +24,7 @@ import {
   OutputRef,
   reflectComponentType,
   createComponent,
+  ComponentMirror,
 } from '@angular/core';
 import {merge, Observable, ReplaySubject} from 'rxjs';
 import {switchMap} from 'rxjs/operators';
@@ -40,18 +41,17 @@ import {
 const DESTROY_DELAY = 10;
 
 /**
- * Factory that creates new ComponentNgElementStrategy instance. Uses reflectComponentType
- * to obtain component metadata and passes the component type to each strategy.
+ * 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.
  */
 export class ComponentNgElementStrategyFactory implements NgElementStrategyFactory {
-  component: Type<any>;
+  componentMirror: ComponentMirror<any>;
 
   inputMap = new Map<string, string>();
 
-  constructor(component: Type<any>, injector: Injector) {
-    this.component = component;
-    const mirror = reflectComponentType(component);
-    for (const input of mirror.inputs) {
+  constructor(protected component: Type<any>) {
+    this.componentMirror = reflectComponentType(component)!;
+    for (const input of this.componentMirror.inputs) {
       this.inputMap.set(input.propName, input.templateName);
     }
   }
@@ -200,10 +200,10 @@ export class ComponentNgElementStrategy implements NgElementStrategy {
     const childInjector = Injector.create({providers: [], parent: this.injector});
     const projectableNodes = extractProjectableNodes(
       element,
-      reflectComponentType(this.component).ngContentSelectors as string[],
+      reflectComponentType(this.component)!.ngContentSelectors as string[],
     );
     this.componentRef = createComponent(this.component, {
-      environmentInjector: this.injector.get(EnvironmentInjector),
+      environmentInjector: this.injector as EnvironmentInjector,
       elementInjector: childInjector,
       hostElement: element,
       projectableNodes,
@@ -227,15 +227,15 @@ 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>[] = reflectComponentType(this.component).outputs.map(
-      ({propName, templateName}) => {
-        const emitter: EventEmitter<any> | OutputRef<any> = componentRef.instance[propName];
-        return new Observable((observer) => {
-          const sub = emitter.subscribe((value) => observer.next({name: templateName, value}));
-          return () => sub.unsubscribe();
-        });
-      },
-    );
+    const eventEmitters: Observable<NgElementStrategyEvent>[] = reflectComponentType(
+      this.component,
+    )!.outputs.map(({propName, templateName}) => {
+      const emitter: EventEmitter<any> | OutputRef<any> = componentRef.instance[propName];
+      return new Observable((observer) => {
+        const sub = emitter.subscribe((value) => observer.next({name: templateName, value}));
+        return () => sub.unsubscribe();
+      });
+    });
 
     this.eventEmitters.next(eventEmitters);
   }