bug(Overlay): ViewContainerRef.createComponent() fails within Overlay

[zehavibarak]

Reproduction

https://stackblitz.com/edit/angular-ivy-mcndqk?file=src/app/first-component/first-component.component.ts

2 components. One creates the 2nd using ViewContainerRef.createComponent().
When the 1st is embedded in the app - it works.

Click the button to reproduce.

Expected Behavior

The 2nd component was suppose to show in the overlay.

Actual Behavior

The 2nd component is not part of the DOM.

Environment

• Angular: 10.0.9
• CDK/Material: 10.1.3
• Browser(s): Chrome, any
• Operating System Windows

[zehavibarak]

Found a workaround: use a ViewContainerRef of a child, instead of the one injected in the constructor.

  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
  

  this.container.createComponent(factory);

[crisbeto]

There are two issues that are causing the example to break. The first one can be fixed on our end, but the other one is tricky:

1. Our portal code was making assumptions that all component portals will only have one root node. This will be fixed by fix(cdk/portal): run change detection before inserting portal content #20346.
2. Currently we don't trigger a change detection before we move the content of a ComponentPortal like we do for a TemplatePortal. This causes the ngOnInit of your example to fire after we've moved the content, which leaves the second component in limbo. We've tried to fix this in the past (Revert "fix(portal): detect changes for portal hostview while before attaching. (#4370)" #5131), but it ended up breaking a lot of other cases. You can resolve it on your end by attaching the content inside the constructor, instead of ngOnInit.

[zehavibarak]

Tried to have one root, plus create in constructor - doesn't work.

[crisbeto]

There will always be two roots in your case: app-first-component that was inserted by the portal and app-second-component that was inserted manually. To make it have one root, you'd have to do something like this inside the first component:

// In the template
<ng-container #viewContainerRef></ng-container>

// In the component
@ViewChild('viewContainerRef', {read: ViewContainerRef}) vcr: ViewContainerRef;

this.vcr.insert(...);

I have the multiple root example capture in a unit test that passes after the changes.