fix(overlay): remove overlay container on destroy

Author: jelbourn

src/lib/core/overlay/overlay-container.spec.ts

@@ -0,0 +1,55 @@
+import {async, inject, TestBed} from '@angular/core/testing';
+import {Component, NgModule, ViewChild, ViewContainerRef} from '@angular/core';
+import {PortalModule, TemplatePortalDirective} from '../portal/portal-directives';
+import {Overlay, OverlayContainer, OverlayModule} from './index';
+
+describe('OverlayContainer', () => {
+  let overlay: Overlay;
+  let overlayContainer: OverlayContainer;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [OverlayTestModule]
+    }).compileComponents();
+  }));
+
+  beforeEach(inject([Overlay, OverlayContainer], (o: Overlay, oc: OverlayContainer) => {
+    overlay = o;
+    overlayContainer = oc;
+  }));
+
+  it('should remove the overlay container element from the DOM on destruction', () => {
+    const fixture = TestBed.createComponent(TestComponentWithTemplatePortals);
+
+    const overlayRef = overlay.create();
+    overlayRef.attach(fixture.componentInstance.templatePortal);
+    fixture.detectChanges();
+
+    expect(document.body.querySelector('.cdk-overlay-container'))
+        .not.toBeNull('Expected the overlay container to be in the DOM after opening an overlay');
+
+    // Manually call `ngOnDestroy` because there is no way to force Angular to destroy an
+    // injectable in a unit test.
+    overlayContainer.ngOnDestroy();
+
+    expect(document.body.querySelector('.cdk-overlay-container'))
+        .toBeNull('Expected the overlay container *not* to be in the DOM after destruction');
+  });
+});
+
+/** Test-bed component that contains a TempatePortal and an ElementRef. */
+@Component({
+  template: `<ng-template cdk-portal>Cake</ng-template>`,
+  providers: [Overlay],
+})
+class TestComponentWithTemplatePortals {
+  @ViewChild(TemplatePortalDirective) templatePortal: TemplatePortalDirective;
+
+  constructor(public viewContainerRef: ViewContainerRef) { }
+}
+
+@NgModule({
+  imports: [OverlayModule, PortalModule],
+  declarations: [TestComponentWithTemplatePortals]
+})
+class OverlayTestModule { }

src/lib/core/overlay/overlay-container.ts

@@ -6,15 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Injectable, Optional, SkipSelf} from '@angular/core';
+import {Injectable, Optional, SkipSelf, OnDestroy} from '@angular/core';
 
 
 /**
  * The OverlayContainer is the container in which all overlays will load.
  * It should be provided in the root component to ensure it is properly shared.
  */
 @Injectable()
-export class OverlayContainer {
+export class OverlayContainer implements OnDestroy {
   protected _containerElement: HTMLElement;
 
   private _themeClass: string;
@@ -35,6 +35,12 @@ export class OverlayContainer {
     this._themeClass = value;
   }
 
+  ngOnDestroy() {
+    if (this._containerElement && this._containerElement.parentNode) {
+      this._containerElement.parentNode.removeChild(this._containerElement);
+    }
+  }
+
   /**
    * This method returns the overlay container element.  It will lazily
    * create the element the first time  it is called to facilitate using

src/lib/core/overlay/overlay.spec.ts

@@ -1,17 +1,15 @@
-import {inject, TestBed, async, ComponentFixture} from '@angular/core/testing';
-import {NgModule, Component, ViewChild, ViewContainerRef} from '@angular/core';
-import {TemplatePortalDirective, PortalModule} from '../portal/portal-directives';
-import {TemplatePortal, ComponentPortal} from '../portal/portal';
+import {async, ComponentFixture, inject, TestBed} from '@angular/core/testing';
+import {Component, NgModule, ViewChild, ViewContainerRef} from '@angular/core';
+import {PortalModule, TemplatePortalDirective} from '../portal/portal-directives';
+import {ComponentPortal, TemplatePortal} from '../portal/portal';
 import {
+  Overlay,
+  OverlayContainer,
   OverlayModule,
   OverlayRef,
   OverlayState,
-  OverlayContainer,
-  Overlay,
   PositionStrategy,
-  ViewportRuler,
-  ScrollStrategy,
-  ScrollDispatcher,
+  ScrollStrategy
 } from './index';