CdkPortalOutlet should resolve componentFactories through the portal's ComponentFactoryResolver

[j2L4e]

Bug, feature request, or proposal:

At the moment, CdkPortal tries to resolve ComponentFactories via its own CFR which it got from its own Injector instance:

const componentFactory = this._componentFactoryResolver.resolveComponentFactory(portal.component);

It may happen that you'd like to attach a ComponentPortal with a lazily loaded entryComponent that's not resolvable through the PortalHost's CFR. It should then try to get a CFR instance from the Portal to resolve the ComponentFactory if it can't resolve it through its own:

const componentFactory = portal.injector.get(ComponentFactoryResolver).resolveComponentFactory(portal.component);

I'm not sure if this has any negative side effects.

[jelbourn]

Are you referring to DomPortalOutletor CdkPortalOutlet?

For the first, it uses whatever ComponentFactoryResolver it is given (it's not injected). When used from the overlay, it will be the resolver associated w/ the overlay service, which is expected since the OverlayModule needs to be imported in any lazy-loaded module that would be using it.

For the second, it will use the ComponentFactoryResolver from wherever in the injection tree the outlet lives. The only way I would see this being a problem is if the ComponentPortal is for a component defined in a sibling module. Is that what you're seeing?

[j2L4e]

I'm talking about CdkPortalOutlet.
And yes, this is about lazily loaded children or siblings.

My specific use case is a navigation menu outlet:
<ng-container menuOutlet="topnav"></ng-container> with MenuOutlet extending CdkPortalOutlet

Modules can bring in their own navigation components through route data. Obviously the outlet lives somewhere higher up in the hierarchy and doesn't know about SomeTopnavComponent's factory when it's part of a lazily loaded module.

  {
    path: 'somePath',
    component: SomeComponent,
    data: {
      topnav: SomeTopnavComponent
    },
  }

It'd be great to be able to pass a ComponentFactoryResolver to CdkPortalOutlet in case one needs to deal with sibling and child modules.

[j2L4e]

@crisbeto you closed the linked PR stating that this wouldn't be necessary in Angular 6+.
Could you elaborate on how resolving factories has changed?

Thank you for your work!

[poke]

@crisbeto I have the same question as @j2L4e.

Basically, as per angular/angular#14324, I am unable to attach component portals to my shared portal outlet when the component I want to render is declared within a lazy loaded module. Since the portal outlet’s component factory resolver does not know about the entry components from lazy loaded modules, I need to use the module’s component factory resolver.

So I need a way to be able to pass the component factory resolver to the component portal, or the portal outlet’s attach method.

The pull request did exactly that, and I can confirm (through monkey patching) that this indeed works for me. But even with Angular 6.1, I do not see how this is possible without being able to pass the factory; or without the outlet retrieving the factory from the injector that is passed through the portal.

Could you clarify why you believe that the changes from that PR are no longer necessary for Angular 6? I might be wrong, but I haven’t been able to find a way around the component factory resolver.

[crisbeto]

@poke If I remember correctly, the "Angular 6+" changes that I mentioned when closing the PR were Ivy, but that hasn't landed yet. @jelbourn do you think we should revisit this?

[jelbourn]

Probably. Have an API in mind?

[crisbeto]

I was thinking of basically doing the same as in #9882 which we closed a while ago, because of Ivy.