fix(overlay): clear duplicate overlay container coming in from the server

When coming from a server-side-rendered page, we may end up in a situation where there are multiple overlay containers on the page with stale overlays in them. These changes clear all old overlay containers before creating a new one.

Relates to #11817.

Author: crisbeto

src/cdk/overlay/overlay-container.spec.ts

@@ -52,6 +52,16 @@ describe('OverlayContainer', () => {
     expect(containerElement.classList.contains('commander-shepard'))
         .toBe(false, 'Expected the overlay container not to have class "commander-shepard"');
   });
+
+  it('should ensure that there is only one overlay container on the page', () => {
+    const extraContainer = document.createElement('div');
+    extraContainer.classList.add('cdk-overlay-container');
+    document.body.appendChild(extraContainer);
+
+    overlayContainer.getContainerElement();
+
+    expect(document.querySelectorAll('.cdk-overlay-container').length).toBe(1);
+  });
 });
 
 /** Test-bed component that contains a TempatePortal and an ElementRef. */

src/cdk/overlay/overlay-container.ts

@@ -21,8 +21,11 @@ import {
 @Injectable({providedIn: 'root'})
 export class OverlayContainer implements OnDestroy {
   protected _containerElement: HTMLElement;
+  protected _document: Document;
 
-  constructor(@Inject(DOCUMENT) protected _document: any) {}
+  constructor(@Inject(DOCUMENT) document: any) {
+    this._document = document;
+  }
 
   ngOnDestroy() {
     if (this._containerElement && this._containerElement.parentNode) {
@@ -37,7 +40,10 @@ export class OverlayContainer implements OnDestroy {
    * @returns the container element
    */
   getContainerElement(): HTMLElement {
-    if (!this._containerElement) { this._createContainer(); }
+    if (!this._containerElement) {
+      this._createContainer();
+    }
+
     return this._containerElement;
   }
 
@@ -46,9 +52,16 @@ export class OverlayContainer implements OnDestroy {
    * with the 'cdk-overlay-container' class on the document body.
    */
   protected _createContainer(): void {
-    const container = this._document.createElement('div');
+    const containerClass = 'cdk-overlay-container';
+    const previousContainers = this._document.getElementsByClassName(containerClass);
 
-    container.classList.add('cdk-overlay-container');
+    // 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]);
+    }
+
+    const container = this._document.createElement('div');
+    container.classList.add(containerClass);
     this._document.body.appendChild(container);
     this._containerElement = container;
   }