bug(cdk): positionStrategy of an Overlay only works with Zone.js

[chrisguttandin]

Reproduction

Steps to reproduce:

1. Create an Angular app without zone.js.
2. Create an Overlay with a positionStrategy.

Expected Behavior

The positionStrategy should be applied.

Actual Behavior

The positionStrategy gets not applied.

Environment

• Angular: 11.1.1
• CDK/Material: 11.1.1
• Browser(s): any
• Operating System (e.g. Windows, macOS, Ubuntu): any

I think the reason why this doesn't work is because the positionStrategy only gets applied after the zone became stable. However the NoopZone that Angular uses when being configured to not use zone.js doesn't fire a stable event.

components/src/cdk/overlay/overlay-ref.ts

Lines 124 to 134 in d3deb8b

	// Update the position once the zone is stable so that the overlay will be fully rendered
	// before attempting to position it, as the position may depend on the size of the rendered
	// content.
	this._ngZone.onStable
	.pipe(take(1))
	.subscribe(() => {
	// The overlay could've been detached before the zone has stabilized.
	if (this.hasAttached()) {
	this.updatePosition();
	}
	});

To save others some time debugging this as well I think it would be helpful to log at least a warning in dev mode when someone uses the NoopZone.

I'm not sure though what could be a good fallback for apps without zone.js.

There is also a very brought ticket for supporting zone-less apps (#9169) which is somehow related. I thought it still makes sense to create a specific ticket for this problem. Please feel free to close it if everything regarding zone-less support should be tracked with the other one.

[jelbourn]

This isn't really a bug, just an unfortunate fact that we currently have a hard dependency on zones right now. Without zones, we don't have an effective way to know when Angular finished rendering to perform the positioning.

I do want to resolve this, but I don't see us being able to make any changes here in the components repo without making progress on making zoneless-Angular a better-supported option on the framework side. Closing since this is already tracked in #9169.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}