Angular Overlay refers to non existent dom element as overlay container

Issue

I have been trying to get the latest (6.0.0) ngx-contextmenu to work in an application that we upgraded to angular 9 (it worked previously). The menu doesn't not show.

Digging into the code, tracing, etc. it appears as if the overlay object (that it attaches the menu to) refers to an overlay container div that isn't actually in the DOM anymore. I suspect it was replaced and the overlay is pointing to an old one.

This hypothesis is based on going to the div object in the debugger, changing the .class, and not seeing it change in Elements in the chrome debugger. At that point I wondered if I may be looking at a detached div element. Another way to look at it is the ._host element of the overlay has a parent of <div.cdk-overlay-container> but clicking on it doesn't take me to the Element.

I haven't been able to figure out how it is replaced...

Is this something that happens with overlays? Is there a way to fix its container?

Solution

I figured it out - the environment I was working with had only been partially upgraded. I assumed it was fully upgraded.

Angular material was an older version not compatible with the version of angular we were using.

Answered By - rrauenza