Issue #18519: cdk overlay container removed fix

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

@@ -0,0 +1,27 @@
+import {OverlayContainer} from '@angular/cdk/overlay';
+import {PortalOutlet} from '@angular/cdk/portal';
+
+export class OverlayContainerDomPortalOutlet implements PortalOutlet {
+
+  constructor(private readonly _delegate: PortalOutlet, private readonly _overlayContainer: OverlayContainer) {
+  }
+
+  attach(portal: any): any {
+    // Ensure the container element is up
+    this._overlayContainer.getContainerElement();
+    return this._delegate.attach(portal);
+  }
+
+  detach(): any {
+    return this._delegate.detach();
+  }
+
+  dispose(): void {
+    return this._delegate.dispose();
+  }
+
+  hasAttached(): boolean {
+    return this._delegate.hasAttached();
+  }
+
+}

src/cdk/overlay/overlay-container.ts

@@ -16,6 +16,7 @@ import {
   SkipSelf,
 } from '@angular/core';
 
+const CONTAINER_CLASS = 'cdk-overlay-container';
 
 /** Container inside which all overlays will render. */
 @Injectable({providedIn: 'root'})
@@ -42,6 +43,9 @@ export class OverlayContainer implements OnDestroy {
   getContainerElement(): HTMLElement {
     if (!this._containerElement) {
       this._createContainer();
+    } else if (!this._containerElement.parentNode) {
+        this._removeExistingCdkContainers();
+        this._appendContainerElementToBody();
     }
 
     return this._containerElement;
@@ -52,18 +56,34 @@ export class OverlayContainer implements OnDestroy {
    * with the 'cdk-overlay-container' class on the document body.
    */
   protected _createContainer(): void {
-    const containerClass = 'cdk-overlay-container';
-    const previousContainers = this._document.getElementsByClassName(containerClass);
+    this._removeExistingCdkContainers();
+    const container = this._document.createElement('div');
+    container.classList.add(CONTAINER_CLASS);
+    this._containerElement = container;
+    this._appendContainerElementToBody();
+  }
+
+  /**
+   * Append the current container element
+   */
+  protected _appendContainerElementToBody() {
+    if (this._containerElement) {
+      this._document.body.appendChild(this._containerElement);
+    }
+  }
+
+  /**
+   * Remove all existing CDK containers
+   */
+  protected _removeExistingCdkContainers() {
+    const previousContainers = this._document.getElementsByClassName(CONTAINER_CLASS);
 
     // Remove any old containers. This can happen when transitioning from the server to the client.
     for (let i = 0; i < previousContainers.length; i++) {
-      previousContainers[i].parentNode!.removeChild(previousContainers[i]);
+      if (previousContainers[i] !== this._containerElement) {
+        previousContainers[i].parentNode!.removeChild(previousContainers[i]);
+      }
     }
-
-    const container = this._document.createElement('div');
-    container.classList.add(containerClass);
-    this._document.body.appendChild(container);
-    this._containerElement = container;
   }
 }
 

src/cdk/overlay/overlay.ts

@@ -7,6 +7,7 @@
  */
 
 import {Directionality} from '@angular/cdk/bidi';
+import {OverlayContainerDomPortalOutlet} from '@angular/cdk/overlay/overlay-container-dom-portal-outlet';
 import {DomPortalOutlet} from '@angular/cdk/portal';
 import {DOCUMENT, Location} from '@angular/common';
 import {
@@ -71,7 +72,9 @@ export class Overlay {
 
     overlayConfig.direction = overlayConfig.direction || this._directionality.value;
 
-    return new OverlayRef(portalOutlet, host, pane, overlayConfig, this._ngZone,
+    const decoratedPortalOutlet = new OverlayContainerDomPortalOutlet(portalOutlet, this._overlayContainer);
+
+    return new OverlayRef(decoratedPortalOutlet, host, pane, overlayConfig, this._ngZone,
       this._keyboardDispatcher, this._document, this._location);
   }