fix(cdk/portal): remove ComponentFactoryResolver usages

We now have all the necessary APIs to allow to remove our usages of the deprecated `ComponentFactoryResolver`.

Fixes #24334.

Author: crisbeto

src/cdk/portal/dom-portal-outlet.ts

@@ -8,10 +8,10 @@
 
 import {
   ApplicationRef,
-  ComponentFactoryResolver,
   ComponentRef,
   EmbeddedViewRef,
   Injector,
+  createComponent,
 } from '@angular/core';
 import {BasePortalOutlet, ComponentPortal, DomPortal, TemplatePortal} from './portal';
 
@@ -36,7 +36,11 @@ export class DomPortalOutlet extends BasePortalOutlet {
   constructor(
     /** Element into which the content is projected. */
     public outletElement: Element,
-    private _componentFactoryResolver?: ComponentFactoryResolver,
+    /**
+     * @deprecated No longer in use. To be removed.
+     * @breaking-change 18.0.0
+     */
+    _componentFactoryResolver?: any,
     private _appRef?: ApplicationRef,
     private _defaultInjector?: Injector,
 
@@ -51,41 +55,36 @@ export class DomPortalOutlet 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.
    */
   attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T> {
-    const resolver = (portal.componentFactoryResolver || this._componentFactoryResolver)!;
-
-    if ((typeof ngDevMode === 'undefined' || ngDevMode) && !resolver) {
-      throw Error('Cannot attach component portal to outlet without a ComponentFactoryResolver.');
-    }
-
-    const componentFactory = resolver.resolveComponentFactory(portal.component);
     let componentRef: ComponentRef<T>;
 
     // If the portal specifies a ViewContainerRef, we will use that as the attachment point
     // for the component (in terms of Angular's component tree, not rendering).
     // 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) {
-      componentRef = portal.viewContainerRef.createComponent(
-        componentFactory,
-        portal.viewContainerRef.length,
-        portal.injector || portal.viewContainerRef.injector,
-        portal.projectableNodes || undefined,
-      );
+      componentRef = portal.viewContainerRef.createComponent(portal.component, {
+        index: portal.viewContainerRef.length,
+        injector: portal.injector || portal.viewContainerRef.injector,
+        projectableNodes: portal.projectableNodes || undefined,
+      });
 
       this.setDisposeFn(() => componentRef.destroy());
     } else {
       if ((typeof ngDevMode === 'undefined' || ngDevMode) && !this._appRef) {
         throw Error('Cannot attach component portal to outlet without an ApplicationRef.');
       }
 
-      componentRef = componentFactory.create(
-        portal.injector || this._defaultInjector || Injector.NULL,
-      );
+      componentRef = createComponent(portal.component, {
+        elementInjector: portal.injector || this._defaultInjector || Injector.NULL,
+        environmentInjector: this._appRef!.injector,
+        projectableNodes: portal.projectableNodes || undefined,
+      });
+
       this._appRef!.attachView(componentRef.hostView);
       this.setDisposeFn(() => {
         // Verify that the ApplicationRef has registered views before trying to detach a host view.

src/cdk/portal/portal-directives.ts

@@ -7,7 +7,6 @@
  */
 
 import {
-  ComponentFactoryResolver,
   ComponentRef,
   Directive,
   EmbeddedViewRef,
@@ -80,7 +79,11 @@ export class CdkPortalOutlet extends BasePortalOutlet implements OnInit, OnDestr
   private _attachedRef: CdkPortalOutletAttachedRef;
 
   constructor(
-    private _componentFactoryResolver: ComponentFactoryResolver,
+    /**
+     * @deprecated `_componentFactoryResolver` parameter no longer in use. To be removed.
+     * @breaking-change 18.0.0
+     */
+    @Inject(DOCUMENT) _componentFactoryResolver: any,
     private _viewContainerRef: ViewContainerRef,
 
     /**
@@ -137,7 +140,7 @@ export class CdkPortalOutlet extends BasePortalOutlet implements OnInit, OnDestr
   }
 
   /**
-   * Attach the given ComponentPortal to this PortalOutlet using the ComponentFactoryResolver.
+   * Attach the given ComponentPortal to this PortalOutlet.
    *
    * @param portal Portal to be attached to the portal outlet.
    * @returns Reference to the created component.
@@ -150,14 +153,11 @@ export class CdkPortalOutlet extends BasePortalOutlet implements OnInit, OnDestr
     const viewContainerRef =
       portal.viewContainerRef != null ? portal.viewContainerRef : this._viewContainerRef;
 
-    const resolver = portal.componentFactoryResolver || this._componentFactoryResolver;
-    const componentFactory = resolver.resolveComponentFactory(portal.component);
-    const ref = viewContainerRef.createComponent(
-      componentFactory,
-      viewContainerRef.length,
-      portal.injector || viewContainerRef.injector,
-      portal.projectableNodes || undefined,
-    );
+    const ref = viewContainerRef.createComponent(portal.component, {
+      index: viewContainerRef.length,
+      injector: portal.injector || viewContainerRef.injector,
+      projectableNodes: portal.projectableNodes || undefined,
+    });
 
     // If we're using a view container that's different from the injected one (e.g. when the portal
     // specifies its own) we need to move the component into the outlet, otherwise it'll be rendered

src/cdk/portal/portal.spec.ts

@@ -2,7 +2,6 @@ import {CommonModule} from '@angular/common';
 import {
   ApplicationRef,
   Component,
-  ComponentFactoryResolver,
   ComponentRef,
   ElementRef,
   Injector,
@@ -37,15 +36,10 @@ describe('Portals', () => {
 
   describe('CdkPortalOutlet', () => {
     let fixture: ComponentFixture<PortalTestApp>;
-    let componentFactoryResolver: ComponentFactoryResolver;
 
     beforeEach(() => {
       fixture = TestBed.createComponent(PortalTestApp);
       fixture.detectChanges();
-
-      inject([ComponentFactoryResolver], (cfr: ComponentFactoryResolver) => {
-        componentFactoryResolver = cfr;
-      })();
     });
 
     it('should load a component into the portal', () => {
@@ -428,19 +422,6 @@ describe('Portals', () => {
       expect(instance.portalOutlet.hasAttached()).toBe(true);
     });
 
-    it('should use the `ComponentFactoryResolver` from the portal, if available', () => {
-      const spy = jasmine.createSpy('resolveComponentFactorySpy');
-      const portal = new ComponentPortal(PizzaMsg, undefined, undefined, {
-        resolveComponentFactory: <T>(...args: [Type<T>]) => {
-          spy();
-          return componentFactoryResolver.resolveComponentFactory(...args);
-        },
-      });
-
-      fixture.componentInstance.portalOutlet.attachComponentPortal(portal);
-      expect(spy).toHaveBeenCalled();
-    });
-
     it('should render inside outlet when component portal specifies view container ref', () => {
       const hostContainer = fixture.nativeElement.querySelector('.portal-container');
       const portal = new ComponentPortal(PizzaMsg, fixture.componentInstance.alternateContainer);
@@ -466,32 +447,23 @@ describe('Portals', () => {
   });
 
   describe('DomPortalOutlet', () => {
-    let componentFactoryResolver: ComponentFactoryResolver;
     let someViewContainerRef: ViewContainerRef;
     let someInjector: Injector;
     let someFixture: ComponentFixture<ArbitraryViewContainerRefComponent>;
     let someDomElement: HTMLElement;
     let host: DomPortalOutlet;
     let injector: Injector;
     let appRef: ApplicationRef;
-    let deps = [ComponentFactoryResolver, Injector, ApplicationRef];
+    let deps = [Injector, ApplicationRef];
 
-    beforeEach(inject(deps, (cfr: ComponentFactoryResolver, i: Injector, ar: ApplicationRef) => {
-      componentFactoryResolver = cfr;
+    beforeEach(inject(deps, (i: Injector, ar: ApplicationRef) => {
       injector = i;
       appRef = ar;
     }));
 
     beforeEach(() => {
       someDomElement = document.createElement('div');
-      host = new DomPortalOutlet(
-        someDomElement,
-        componentFactoryResolver,
-        appRef,
-        injector,
-        document,
-      );
-
+      host = new DomPortalOutlet(someDomElement, null, appRef, injector, document);
       someFixture = TestBed.createComponent(ArbitraryViewContainerRefComponent);
       someViewContainerRef = someFixture.componentInstance.viewContainerRef;
       someInjector = someFixture.componentInstance.injector;
@@ -647,19 +619,6 @@ describe('Portals', () => {
       expect(spy).toHaveBeenCalled();
     });
 
-    it('should use the `ComponentFactoryResolver` from the portal, if available', () => {
-      const spy = jasmine.createSpy('resolveComponentFactorySpy');
-      const portal = new ComponentPortal(PizzaMsg, undefined, undefined, {
-        resolveComponentFactory: <T>(...args: [Type<T>]) => {
-          spy();
-          return componentFactoryResolver.resolveComponentFactory(...args);
-        },
-      });
-
-      host.attachComponentPortal(portal);
-      expect(spy).toHaveBeenCalled();
-    });
-
     it('should attach and detach a DOM portal', () => {
       const fixture = TestBed.createComponent(PortalTestApp);
       fixture.detectChanges();

src/cdk/portal/portal.ts

@@ -13,7 +13,6 @@ import {
   ComponentRef,
   EmbeddedViewRef,
   Injector,
-  ComponentFactoryResolver,
 } from '@angular/core';
 import {
   throwNullPortalOutletError,
@@ -96,10 +95,10 @@ export class ComponentPortal<T> extends Portal<ComponentRef<T>> {
   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.
+   * @deprecated No longer in use. To be removed.
+   * @breaking-change 18.0.0
    */
-  componentFactoryResolver?: ComponentFactoryResolver | null;
+  componentFactoryResolver?: any;
 
   /**
    * List of DOM nodes that should be projected through `<ng-content>` of the attached component.
@@ -110,14 +109,17 @@ export class ComponentPortal<T> extends Portal<ComponentRef<T>> {
     component: ComponentType<T>,
     viewContainerRef?: ViewContainerRef | null,
     injector?: Injector | null,
-    componentFactoryResolver?: ComponentFactoryResolver | null,
+    /**
+     * @deprecated No longer in use. To be removed.
+     * @breaking-change 18.0.0
+     */
+    _componentFactoryResolver?: any,
     projectableNodes?: Node[][] | null,
   ) {
     super();
     this.component = component;
     this.viewContainerRef = viewContainerRef;
     this.injector = injector;
-    this.componentFactoryResolver = componentFactoryResolver;
     this.projectableNodes = projectableNodes;
   }
 }

src/material/dialog/dialog.spec.ts

@@ -16,7 +16,6 @@ import {SpyLocation} from '@angular/common/testing';
 import {
   ChangeDetectionStrategy,
   Component,
-  ComponentFactoryResolver,
   createNgModuleRef,
   Directive,
   Inject,
@@ -754,21 +753,6 @@ describe('MDC-based MatDialog', () => {
     expect(scrollStrategy.enable).toHaveBeenCalled();
   }));
 
-  it('should be able to pass in an alternate ComponentFactoryResolver', inject(
-    [ComponentFactoryResolver],
-    (resolver: ComponentFactoryResolver) => {
-      spyOn(resolver, 'resolveComponentFactory').and.callThrough();
-
-      dialog.open(PizzaMsg, {
-        viewContainerRef: testViewContainerRef,
-        componentFactoryResolver: resolver,
-      });
-      viewContainerFixture.detectChanges();
-
-      expect(resolver.resolveComponentFactory).toHaveBeenCalled();
-    },
-  ));
-
   describe('passing in data', () => {
     it('should be able to pass in data', () => {
       let config = {data: {stringParam: 'hello', dateParam: new Date()}};

src/material/legacy-dialog/dialog.spec.ts

@@ -17,7 +17,6 @@ import {
   TemplateRef,
   ViewChild,
   ViewContainerRef,
-  ComponentFactoryResolver,
   NgZone,
   ViewEncapsulation,
   Injectable,
@@ -813,21 +812,6 @@ describe('MatDialog', () => {
     expect(scrollStrategy.enable).toHaveBeenCalled();
   }));
 
-  it('should be able to pass in an alternate ComponentFactoryResolver', inject(
-    [ComponentFactoryResolver],
-    (resolver: ComponentFactoryResolver) => {
-      spyOn(resolver, 'resolveComponentFactory').and.callThrough();
-
-      dialog.open(PizzaMsg, {
-        viewContainerRef: testViewContainerRef,
-        componentFactoryResolver: resolver,
-      });
-      viewContainerFixture.detectChanges();
-
-      expect(resolver.resolveComponentFactory).toHaveBeenCalled();
-    },
-  ));
-
   describe('passing in data', () => {
     it('should be able to pass in data', () => {
       const config = {

tools/public_api_guard/cdk/portal.md

@@ -5,7 +5,6 @@
 ```ts
 
 import { ApplicationRef } from '@angular/core';
-import { ComponentFactoryResolver } from '@angular/core';
 import { ComponentRef } from '@angular/core';
 import { ElementRef } from '@angular/core';
 import { EmbeddedViewRef } from '@angular/core';
@@ -53,7 +52,8 @@ export class CdkPortal extends TemplatePortal {
 
 // @public
 export class CdkPortalOutlet extends BasePortalOutlet implements OnInit, OnDestroy {
-    constructor(_componentFactoryResolver: ComponentFactoryResolver, _viewContainerRef: ViewContainerRef,
+    constructor(
+    _componentFactoryResolver: any, _viewContainerRef: ViewContainerRef,
     _document?: any);
     attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T>;
     // @deprecated
@@ -78,9 +78,11 @@ export type CdkPortalOutletAttachedRef = ComponentRef<any> | EmbeddedViewRef<any
 
 // @public
 export class ComponentPortal<T> extends Portal<ComponentRef<T>> {
-    constructor(component: ComponentType<T>, viewContainerRef?: ViewContainerRef | null, injector?: Injector | null, componentFactoryResolver?: ComponentFactoryResolver | null, projectableNodes?: Node[][] | null);
+    constructor(component: ComponentType<T>, viewContainerRef?: ViewContainerRef | null, injector?: Injector | null,
+    _componentFactoryResolver?: any, projectableNodes?: Node[][] | null);
     component: ComponentType<T>;
-    componentFactoryResolver?: ComponentFactoryResolver | null;
+    // @deprecated (undocumented)
+    componentFactoryResolver?: any;
     injector?: Injector | null;
     projectableNodes?: Node[][] | null;
     viewContainerRef?: ViewContainerRef | null;
@@ -105,7 +107,8 @@ export class DomPortalHost extends DomPortalOutlet {
 // @public
 export class DomPortalOutlet extends BasePortalOutlet {
     constructor(
-    outletElement: Element, _componentFactoryResolver?: ComponentFactoryResolver | undefined, _appRef?: ApplicationRef | undefined, _defaultInjector?: Injector | undefined,
+    outletElement: Element,
+    _componentFactoryResolver?: any, _appRef?: ApplicationRef | undefined, _defaultInjector?: Injector | undefined,
     _document?: any);
     attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T>;
     // @deprecated