feat: update cdk-inspired components and drop ComponentFactoryResolver

Author: edusperoni

apps/nativescript-demo-ng/src/tests/detached-utils-tests.spec.ts

@@ -1,7 +1,5 @@
 import {
   Component,
-  ComponentFactory,
-  ComponentFactoryResolver,
   ComponentRef,
   EmbeddedViewRef,
   inject,
@@ -10,7 +8,7 @@ import {
   NO_ERRORS_SCHEMA,
   TemplateRef,
   ViewChild,
-  ViewContainerRef,
+  ViewContainerRef
 } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { generateDetachedLoader, generateNativeScriptView, NativeScriptCommonModule, NgViewRef } from '@nativescript/angular';
@@ -82,10 +80,7 @@ describe('generateNativeScriptView', () => {
   });
 
   it('should reuse a DetachedLoaderRef', () => {
-    const containerRef = generateDetachedLoader(
-      fixture.componentRef.instance.injector.get(ComponentFactoryResolver),
-      fixture.componentRef.instance.injector,
-    );
+    const containerRef = generateDetachedLoader(fixture.componentRef.instance.injector);
     cleanup.push(containerRef);
     const ngViewRef = generateNativeScriptView(GeneratedComponent, {
       injector: fixture.componentRef.instance.injector,

packages/angular/src/lib/cdk/detached-loader.ts

@@ -1,4 +1,4 @@
-import { ApplicationRef, ChangeDetectorRef, Component, ComponentFactory, ComponentFactoryResolver, ComponentRef, inject, Injector, NO_ERRORS_SCHEMA, OnDestroy, TemplateRef, Type, ViewChild, ViewContainerRef } from '@angular/core';
+import { ApplicationRef, ChangeDetectorRef, Component, ComponentFactory, ComponentRef, createComponent, inject, Injector, NO_ERRORS_SCHEMA, OnDestroy, TemplateRef, Type, ViewChild, ViewContainerRef } from '@angular/core';
 import { ProxyViewContainer, Trace } from '@nativescript/core';
 import { registerElement } from '../element-registry';
 import type { ComponentType } from '../utils/general';
@@ -27,7 +27,6 @@ export class DetachedLoader implements OnDestroy {
   @ViewChild('vc', { read: ViewContainerRef, static: true }) vc: ViewContainerRef;
   private disposeFunctions: Array<() => void> = [];
   // tslint:disable-line:component-class-suffix
-  resolver = inject(ComponentFactoryResolver);
   changeDetector = inject(ChangeDetectorRef);
   containerRef = inject(ViewContainerRef);
   appRef = inject(ApplicationRef);
@@ -41,8 +40,10 @@ export class DetachedLoader implements OnDestroy {
   }
 
   private loadInAppRef(componentType: Type<any>): ComponentRef<any> {
-    const factory = this.resolver.resolveComponentFactory(componentType);
-    const componentRef = factory.create(this.containerRef.injector);
+    const componentRef = createComponent(componentType, {
+      environmentInjector: this.appRef.injector,
+      elementInjector: this.containerRef.injector,
+    });
     this.appRef.attachView(componentRef.hostView);
 
     this.disposeFunctions.push(() => {

packages/angular/src/lib/cdk/dialog/dialog-config.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import { ViewContainerRef, ComponentFactoryResolver, Injector } from '@angular/core';
+import { ViewContainerRef, Binding, Injector } from '@angular/core';
 import { ShowModalOptions, View } from '@nativescript/core';
 
 export type NativeShowModalOptions = Partial<Omit<ShowModalOptions, 'cancelable' | 'closeCallback'>>;
@@ -50,10 +50,11 @@ export class NativeDialogConfig<D = any> {
    */
   closeOnNavigation?: boolean = true;
 
-  /** Alternate `ComponentFactoryResolver` to use when resolving the associated component.
-   * @deprecated
+  /**
+   * Bindings to apply to the component rendered inside the dialog.
+   * Does nothing for template-based dialogs.
    */
-  componentFactoryResolver?: ComponentFactoryResolver;
+  bindings?: Binding[];
 
   nativeOptions?: NativeShowModalOptions = {};
 

packages/angular/src/lib/cdk/dialog/dialog-services.ts

@@ -160,23 +160,15 @@ export class NativeDialog implements OnDestroy {
     const dialogRef = new this._dialogRefConstructor(nativeModalRef, config.id);
 
     if (componentOrTemplateRef instanceof TemplateRef) {
-      //     const detachedFactory = options.resolver.resolveComponentFactory(DetachedLoader);
-      //     if(options.attachToContainerRef) {
-      //         detachedLoaderRef = options.attachToContainerRef.createComponent(detachedFactory, 0, childInjector, null);
-      //     } else {
-      //         detachedLoaderRef = detachedFactory.create(childInjector); // this DetachedLoader is **completely** detached
-      //         this.appRef.attachView(detachedLoaderRef.hostView); // we attach it to the applicationRef, so it becomes a "root" view in angular's hierarchy
-      //     }
-      //     detachedLoaderRef.changeDetectorRef.detectChanges(); // force a change detection
-      //     detachedLoaderRef.instance.createTemplatePortal(options.templateRef);
+      const injector = this._createInjector<T>(config, dialogRef);
       nativeModalRef.attachTemplatePortal(
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        new TemplatePortal<T>(componentOrTemplateRef, null!, <any>{ $implicit: config.data, dialogRef }),
+        new TemplatePortal<T>(componentOrTemplateRef, null!, <any>{ $implicit: config.data, dialogRef }, injector),
       );
     } else {
       const injector = this._createInjector<T>(config, dialogRef);
       const contentRef = nativeModalRef.attachComponentPortal<T>(
-        new ComponentPortal(componentOrTemplateRef, config.viewContainerRef, injector),
+        new ComponentPortal(componentOrTemplateRef, config.viewContainerRef, injector, null, config.bindings),
       );
       dialogRef.componentInstance = contentRef.instance;
     }

packages/angular/src/lib/cdk/portal/common.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import { TemplateRef, ViewContainerRef, ElementRef, ComponentRef, EmbeddedViewRef, Injector, ComponentFactoryResolver } from '@angular/core';
+import { TemplateRef, ViewContainerRef, ElementRef, ComponentRef, EmbeddedViewRef, Injector, Binding, Type, DirectiveWithBindings } from '@angular/core';
 import { View } from '@nativescript/core';
 import { throwNullPortalOutletError, throwPortalAlreadyAttachedError, throwNoPortalAttachedError, throwNullPortalError, throwPortalOutletAlreadyDisposedError, throwUnknownPortalTypeError } from './portal-errors';
 import type { ComponentType } from '../../utils/general';
@@ -16,7 +16,7 @@ import type { ComponentType } from '../../utils/general';
  * It can be attach to / detached from a `PortalOutlet`.
  */
 export abstract class Portal<T> {
-  private _attachedHost: PortalOutlet | null;
+  private _attachedHost: PortalOutlet | null = null;
 
   /** Attach this portal to a host. */
   attach(host: PortalOutlet): T {
@@ -68,27 +68,45 @@ export class ComponentPortal<T> extends Portal<ComponentRef<T>> {
   component: ComponentType<T>;
 
   /**
-   * [Optional] Where the attached component should live in Angular's *logical* component tree.
+   * Where the attached component should live in Angular's *logical* component tree.
    * This is different from where the component *renders*, which is determined by the PortalOutlet.
    * The origin is necessary when the host is outside of the Angular application context.
    */
   viewContainerRef?: ViewContainerRef | null;
 
-  /** [Optional] Injector used for the instantiation of the component. */
+  /** Injector used for the instantiation of the component. */
   injector?: Injector | null;
 
   /**
-   * Alternate `ComponentFactoryResolver` to use when resolving the associated component.
-   * Defaults to using the resolver from the outlet that the portal is attached to.
+   * List of NativeScript views that should be projected through `<ng-content>` of the attached component.
    */
-  componentFactoryResolver?: ComponentFactoryResolver | null;
+  projectableNodes?: View[][] | null;
 
-  constructor(component: ComponentType<T>, viewContainerRef?: ViewContainerRef | null, injector?: Injector | null, componentFactoryResolver?: ComponentFactoryResolver | null) {
+  /**
+   * Bindings to apply to the created component.
+   */
+  readonly bindings: Binding[] | null;
+
+  /**
+   * Directives to apply to the created component.
+   */
+  readonly directives: (Type<unknown> | DirectiveWithBindings<unknown>)[] | null;
+
+  constructor(
+    component: ComponentType<T>,
+    viewContainerRef?: ViewContainerRef | null,
+    injector?: Injector | null,
+    projectableNodes?: View[][] | null,
+    bindings?: Binding[],
+    directives?: (Type<unknown> | DirectiveWithBindings<unknown>)[],
+  ) {
     super();
     this.component = component;
     this.viewContainerRef = viewContainerRef;
     this.injector = injector;
-    this.componentFactoryResolver = componentFactoryResolver;
+    this.projectableNodes = projectableNodes;
+    this.bindings = bindings || null;
+    this.directives = directives || null;
   }
 }
 
@@ -105,11 +123,15 @@ export class TemplatePortal<C = any> extends Portal<EmbeddedViewRef<C>> {
   /** Contextual data to be passed in to the embedded view. */
   context: C | undefined;
 
-  constructor(template: TemplateRef<C>, viewContainerRef: ViewContainerRef, context?: C) {
+  /** The injector to use for the embedded view. */
+  injector: Injector | undefined;
+
+  constructor(template: TemplateRef<C>, viewContainerRef: ViewContainerRef, context?: C, injector?: Injector) {
     super();
     this.templateRef = template;
     this.viewContainerRef = viewContainerRef;
     this.context = context;
+    this.injector = injector;
   }
 
   get origin(): ElementRef {
@@ -168,13 +190,13 @@ export interface PortalOutlet {
  */
 export abstract class BasePortalOutlet implements PortalOutlet {
   /** The portal currently attached to the host. */
-  protected _attachedPortal: Portal<any> | null;
+  protected _attachedPortal: Portal<any> | null = null;
 
   /** A function that will permanently dispose this host. */
-  private _disposeFn: (() => void) | null;
+  private _disposeFn: (() => void) | null = null;
 
   /** Whether this host has already been permanently disposed. */
-  private _isDisposed = false;
+  private _isDisposed: boolean = false;
 
   /** Whether this host has an attached portal. */
   hasAttached(): boolean {

packages/angular/src/lib/cdk/portal/nsdom-portal-outlet.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import { ComponentRef, EmbeddedViewRef, ApplicationRef, Injector, Renderer2, Optional, createComponent } from '@angular/core';
+import { ComponentRef, EmbeddedViewRef, ApplicationRef, Injector, EnvironmentInjector, NgModuleRef, Optional, createComponent } from '@angular/core';
 import { View } from '@nativescript/core';
 import { CommentNode } from '../../views/invisible-nodes';
 import { ViewUtil } from '../../view-util';
@@ -30,7 +30,7 @@ export class NativeScriptDomPortalOutlet extends BasePortalOutlet {
   }
 
   /**
-   * Attach the given ComponentPortal to DOM element using the ComponentFactoryResolver.
+   * Attach the given ComponentPortal to DOM element.
    * @param portal Portal to be attached
    * @returns Reference to the created component.
    */
@@ -42,20 +42,36 @@ export class NativeScriptDomPortalOutlet extends BasePortalOutlet {
     // When the ViewContainerRef is missing, we use the factory to create the component directly
     // and then manually attach the view to the application.
     if (portal.viewContainerRef) {
+      const injector = portal.injector || portal.viewContainerRef.injector;
+      const ngModuleRef = injector.get(NgModuleRef, null, { optional: true }) || undefined;
+
       componentRef = portal.viewContainerRef.createComponent(portal.component, {
         index: portal.viewContainerRef.length,
-        injector: portal.injector || portal.viewContainerRef.injector,
+        injector,
+        ngModuleRef,
+        projectableNodes: (portal.projectableNodes as unknown as Node[][]) || undefined,
+        bindings: portal.bindings || undefined,
+        directives: portal.directives || undefined,
       });
 
       this.setDisposeFn(() => componentRef.destroy());
     } else {
+      const elementInjector = portal.injector || this._defaultInjector || Injector.NULL;
+      const environmentInjector = elementInjector.get(EnvironmentInjector, this._appRef.injector);
       componentRef = createComponent(portal.component, {
-        elementInjector: portal.injector || this._defaultInjector || Injector.NULL,
-        environmentInjector: this._appRef.injector,
+        elementInjector,
+        environmentInjector,
+        projectableNodes: (portal.projectableNodes as unknown as Node[][]) || undefined,
+        bindings: portal.bindings || undefined,
+        directives: portal.directives || undefined,
       });
       this._appRef.attachView(componentRef.hostView);
       this.setDisposeFn(() => {
-        this._appRef.detachView(componentRef.hostView);
+        // Verify that the ApplicationRef has registered views before trying to detach a host view.
+        // This check also protects the `detachView` from being called on a destroyed ApplicationRef.
+        if (this._appRef.viewCount > 0) {
+          this._appRef.detachView(componentRef.hostView);
+        }
         componentRef.destroy();
       });
     }
@@ -66,6 +82,7 @@ export class NativeScriptDomPortalOutlet extends BasePortalOutlet {
       this._viewUtil.removeChild(rootNode.parent as View, rootNode);
     }
     this._viewUtil.appendChild(this.outletElement, this._getComponentRootNode(componentRef));
+    this._attachedPortal = portal;
 
     return componentRef;
   }
@@ -77,7 +94,9 @@ export class NativeScriptDomPortalOutlet extends BasePortalOutlet {
    */
   attachTemplatePortal<C>(portal: TemplatePortal<C>): EmbeddedViewRef<C> {
     const viewContainer = portal.viewContainerRef;
-    const viewRef = viewContainer.createEmbeddedView(portal.templateRef, portal.context);
+    const viewRef = viewContainer.createEmbeddedView(portal.templateRef, portal.context, {
+      injector: portal.injector,
+    });
 
     // The method `createEmbeddedView` will add the view as a child of the viewContainer.
     // But for the DomPortalOutlet the view can be added everywhere in the DOM
@@ -102,6 +121,8 @@ export class NativeScriptDomPortalOutlet extends BasePortalOutlet {
       }
     });
 
+    this._attachedPortal = portal;
+
     // TODO(jelbourn): Return locals from view.
     return viewRef;
   }
@@ -124,6 +145,7 @@ export class NativeScriptDomPortalOutlet extends BasePortalOutlet {
 
     this._viewUtil.insertBefore(element.parentNode as View, anchorNode, element);
     this._viewUtil.appendChild(this.outletElement, element);
+    this._attachedPortal = portal;
 
     super.setDisposeFn(() => {
       // We can't use `replaceWith` here because IE doesn't support it.