fix(overlay): better handling of server-side rendering (#8422)

Fixes multiple server-side rendering issues in the overlay that were causing errors when an overlay is opened in Universal.

Fixes #8412.

Author: crisbeto

src/cdk/a11y/live-announcer.ts

@@ -14,7 +14,7 @@ import {
   SkipSelf,
   OnDestroy,
 } from '@angular/core';
-import {Platform} from '@angular/cdk/platform';
+import {DOCUMENT} from '@angular/common';
 
 
 export const LIVE_ANNOUNCER_ELEMENT_TOKEN = new InjectionToken<HTMLElement>('liveAnnouncerElement');
@@ -28,14 +28,12 @@ export class LiveAnnouncer implements OnDestroy {
 
   constructor(
       @Optional() @Inject(LIVE_ANNOUNCER_ELEMENT_TOKEN) elementToken: any,
-      platform: Platform) {
-    // Only do anything if we're on the browser platform.
-    if (platform.isBrowser) {
-      // We inject the live element as `any` because the constructor signature cannot reference
-      // browser globals (HTMLElement) on non-browser environments, since having a class decorator
-      // causes TypeScript to preserve the constructor signature types.
-      this._liveElement = elementToken || this._createLiveElement();
-    }
+      @Inject(DOCUMENT) private _document: any) {
+
+    // We inject the live element as `any` because the constructor signature cannot reference
+    // browser globals (HTMLElement) on non-browser environments, since having a class decorator
+    // causes TypeScript to preserve the constructor signature types.
+    this._liveElement = elementToken || this._createLiveElement();
   }
 
   /**
@@ -64,13 +62,13 @@ export class LiveAnnouncer implements OnDestroy {
   }
 
   private _createLiveElement(): Element {
-    let liveEl = document.createElement('div');
+    let liveEl = this._document.createElement('div');
 
     liveEl.classList.add('cdk-visually-hidden');
     liveEl.setAttribute('aria-atomic', 'true');
     liveEl.setAttribute('aria-live', 'polite');
 
-    document.body.appendChild(liveEl);
+    this._document.body.appendChild(liveEl);
 
     return liveEl;
   }
@@ -79,8 +77,8 @@ export class LiveAnnouncer implements OnDestroy {
 
 /** @docs-private */
 export function LIVE_ANNOUNCER_PROVIDER_FACTORY(
-    parentDispatcher: LiveAnnouncer, liveElement: any, platform: Platform) {
-  return parentDispatcher || new LiveAnnouncer(liveElement, platform);
+    parentDispatcher: LiveAnnouncer, liveElement: any, _document: any) {
+  return parentDispatcher || new LiveAnnouncer(liveElement, _document);
 }
 
 /** @docs-private */
@@ -90,7 +88,7 @@ export const LIVE_ANNOUNCER_PROVIDER = {
   deps: [
     [new Optional(), new SkipSelf(), LiveAnnouncer],
     [new Optional(), new Inject(LIVE_ANNOUNCER_ELEMENT_TOKEN)],
-    Platform,
+    DOCUMENT,
   ],
   useFactory: LIVE_ANNOUNCER_PROVIDER_FACTORY
 };

src/cdk/bidi/bidi-module.ts

@@ -7,7 +7,7 @@
  */
 
 import {NgModule} from '@angular/core';
-import {DOCUMENT} from '@angular/platform-browser';
+import {DOCUMENT} from '@angular/common';
 import {Dir} from './dir';
 import {DIR_DOCUMENT, Directionality} from './directionality';
 

src/cdk/overlay/keyboard/overlay-keyboard-dispatcher.ts

@@ -6,11 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Injectable, Optional, SkipSelf, OnDestroy} from '@angular/core';
+import {Injectable, Inject, InjectionToken, Optional, SkipSelf, OnDestroy} from '@angular/core';
 import {OverlayRef} from '../overlay-ref';
 import {Subscription} from 'rxjs/Subscription';
 import {filter} from 'rxjs/operators/filter';
 import {fromEvent} from 'rxjs/observable/fromEvent';
+import {DOCUMENT} from '@angular/common';
 
 /**
  * Service for dispatching keyboard events that land on the body to appropriate overlay ref,
@@ -25,6 +26,8 @@ export class OverlayKeyboardDispatcher implements OnDestroy {
 
   private _keydownEventSubscription: Subscription | null;
 
+  constructor(@Inject(DOCUMENT) private _document: any) {}
+
   ngOnDestroy() {
     if (this._keydownEventSubscription) {
       this._keydownEventSubscription.unsubscribe();
@@ -55,7 +58,7 @@ export class OverlayKeyboardDispatcher implements OnDestroy {
    * events to the appropriate overlay.
    */
   private _subscribeToKeydownEvents(): void {
-    const bodyKeydownEvents = fromEvent<KeyboardEvent>(document.body, 'keydown');
+    const bodyKeydownEvents = fromEvent<KeyboardEvent>(this._document.body, 'keydown');
 
     this._keydownEventSubscription = bodyKeydownEvents.pipe(
       filter(() => !!this._attachedOverlays.length)
@@ -81,15 +84,21 @@ export class OverlayKeyboardDispatcher implements OnDestroy {
 
 /** @docs-private */
 export function OVERLAY_KEYBOARD_DISPATCHER_PROVIDER_FACTORY(
-    dispatcher: OverlayKeyboardDispatcher) {
-  return dispatcher || new OverlayKeyboardDispatcher();
+    dispatcher: OverlayKeyboardDispatcher, _document: any) {
+  return dispatcher || new OverlayKeyboardDispatcher(_document);
 }
 
 /** @docs-private */
 export const OVERLAY_KEYBOARD_DISPATCHER_PROVIDER = {
   // If there is already an OverlayKeyboardDispatcher available, use that.
   // Otherwise, provide a new one.
   provide: OverlayKeyboardDispatcher,
-  deps: [[new Optional(), new SkipSelf(), OverlayKeyboardDispatcher]],
+  deps: [
+    [new Optional(), new SkipSelf(), OverlayKeyboardDispatcher],
+
+    // Coerce to `InjectionToken` so that the `deps` match the "shape"
+    // of the type expected by Angular
+    DOCUMENT as InjectionToken<any>
+  ],
   useFactory: OVERLAY_KEYBOARD_DISPATCHER_PROVIDER_FACTORY
 };

src/cdk/overlay/overlay-container.ts

@@ -6,14 +6,17 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Injectable, Optional, SkipSelf, OnDestroy} from '@angular/core';
+import {Injectable, InjectionToken, Inject, Optional, SkipSelf, OnDestroy} from '@angular/core';
+import {DOCUMENT} from '@angular/common';
 
 
 /** Container inside which all overlays will render. */
 @Injectable()
 export class OverlayContainer implements OnDestroy {
   protected _containerElement: HTMLElement;
 
+  constructor(@Inject(DOCUMENT) private _document: any) {}
+
   ngOnDestroy() {
     if (this._containerElement && this._containerElement.parentNode) {
       this._containerElement.parentNode.removeChild(this._containerElement);
@@ -36,23 +39,27 @@ export class OverlayContainer implements OnDestroy {
    * with the 'cdk-overlay-container' class on the document body.
    */
   protected _createContainer(): void {
-    let container = document.createElement('div');
-    container.classList.add('cdk-overlay-container');
+    const container = this._document.createElement('div');
 
-    document.body.appendChild(container);
+    container.classList.add('cdk-overlay-container');
+    this._document.body.appendChild(container);
     this._containerElement = container;
   }
 }
 
 /** @docs-private */
-export function OVERLAY_CONTAINER_PROVIDER_FACTORY(parentContainer: OverlayContainer) {
-  return parentContainer || new OverlayContainer();
+export function OVERLAY_CONTAINER_PROVIDER_FACTORY(parentContainer: OverlayContainer,
+  _document: any) {
+  return parentContainer || new OverlayContainer(_document);
 }
 
 /** @docs-private */
 export const OVERLAY_CONTAINER_PROVIDER = {
   // If there is already an OverlayContainer available, use that. Otherwise, provide a new one.
   provide: OverlayContainer,
-  deps: [[new Optional(), new SkipSelf(), OverlayContainer]],
+  deps: [
+    [new Optional(), new SkipSelf(), OverlayContainer],
+    DOCUMENT as InjectionToken<any> // We need to use the InjectionToken somewhere to keep TS happy
+  ],
   useFactory: OVERLAY_CONTAINER_PROVIDER_FACTORY
 };

src/cdk/overlay/overlay.ts

@@ -12,6 +12,7 @@ import {
   ApplicationRef,
   Injector,
   NgZone,
+  Inject,
 } from '@angular/core';
 import {DomPortalOutlet} from '@angular/cdk/portal';
 import {OverlayConfig} from './overlay-config';
@@ -20,6 +21,7 @@ import {OverlayPositionBuilder} from './position/overlay-position-builder';
 import {OverlayKeyboardDispatcher} from './keyboard/overlay-keyboard-dispatcher';
 import {OverlayContainer} from './overlay-container';
 import {ScrollStrategyOptions} from './scroll/index';
+import {DOCUMENT} from '@angular/common';
 
 
 /** Next overlay unique ID. */
@@ -48,7 +50,8 @@ export class Overlay {
               private _keyboardDispatcher: OverlayKeyboardDispatcher,
               private _appRef: ApplicationRef,
               private _injector: Injector,
-              private _ngZone: NgZone) { }
+              private _ngZone: NgZone,
+              @Inject(DOCUMENT) private _document: any) { }
 
   /**
    * Creates an overlay.
@@ -75,7 +78,7 @@ export class Overlay {
    * @returns Newly-created pane element
    */
   private _createPaneElement(): HTMLElement {
-    let pane = document.createElement('div');
+    const pane = this._document.createElement('div');
 
     pane.id = `cdk-overlay-${nextUniqueId++}`;
     pane.classList.add('cdk-overlay-pane');

src/cdk/overlay/position/connected-position-strategy.spec.ts

@@ -58,7 +58,7 @@ describe('ConnectedPositionStrategy', () => {
       overlayContainerElement.appendChild(overlayElement);
 
       fakeElementRef = new FakeElementRef(originElement);
-      positionBuilder = new OverlayPositionBuilder(viewportRuler);
+      positionBuilder = new OverlayPositionBuilder(viewportRuler, document);
     });
 
     afterEach(() => {
@@ -177,7 +177,7 @@ describe('ConnectedPositionStrategy', () => {
       });
 
       it('should reposition the overlay if it would go off the bottom of the screen', () => {
-        positionBuilder = new OverlayPositionBuilder(viewportRuler);
+        positionBuilder = new OverlayPositionBuilder(viewportRuler, document);
 
         originElement.style.bottom = '25px';
         originElement.style.left = '200px';
@@ -200,7 +200,7 @@ describe('ConnectedPositionStrategy', () => {
       });
 
       it('should reposition the overlay if it would go off the right of the screen', () => {
-        positionBuilder = new OverlayPositionBuilder(viewportRuler);
+        positionBuilder = new OverlayPositionBuilder(viewportRuler, document);
 
         originElement.style.top = '200px';
         originElement.style.right = '25px';
@@ -224,7 +224,7 @@ describe('ConnectedPositionStrategy', () => {
       });
 
       it('should recalculate and set the last position with recalculateLastPosition()', () => {
-        positionBuilder = new OverlayPositionBuilder(viewportRuler);
+        positionBuilder = new OverlayPositionBuilder(viewportRuler, document);
 
         // Push the trigger down so the overlay doesn't have room to open on the bottom.
         originElement.style.bottom = '25px';
@@ -254,7 +254,7 @@ describe('ConnectedPositionStrategy', () => {
       });
 
       it('should default to the initial position, if no positions fit in the viewport', () => {
-        positionBuilder = new OverlayPositionBuilder(viewportRuler);
+        positionBuilder = new OverlayPositionBuilder(viewportRuler, document);
 
         // Make the origin element taller than the viewport.
         originElement.style.height = '1000px';
@@ -353,7 +353,7 @@ describe('ConnectedPositionStrategy', () => {
     });
 
     it('should emit onPositionChange event when position changes', () => {
-      positionBuilder = new OverlayPositionBuilder(viewportRuler);
+      positionBuilder = new OverlayPositionBuilder(viewportRuler, document);
       originElement.style.top = '200px';
       originElement.style.right = '25px';
 
@@ -390,7 +390,7 @@ describe('ConnectedPositionStrategy', () => {
     });
 
     it('should emit the onPositionChange event even if none of the positions fit', () => {
-      positionBuilder = new OverlayPositionBuilder(viewportRuler);
+      positionBuilder = new OverlayPositionBuilder(viewportRuler, document);
       originElement.style.bottom = '25px';
       originElement.style.right = '25px';
 
@@ -414,7 +414,7 @@ describe('ConnectedPositionStrategy', () => {
     });
 
     it('should pick the fallback position that shows the largest area of the element', () => {
-      positionBuilder = new OverlayPositionBuilder(viewportRuler);
+      positionBuilder = new OverlayPositionBuilder(viewportRuler, document);
 
       originElement.style.top = '200px';
       originElement.style.right = '25px';
@@ -561,7 +561,7 @@ describe('ConnectedPositionStrategy', () => {
       scrollable.appendChild(originElement);
 
       // Create a strategy with knowledge of the scrollable container
-      let positionBuilder = new OverlayPositionBuilder(viewportRuler);
+      let positionBuilder = new OverlayPositionBuilder(viewportRuler, document);
       let fakeElementRef = new FakeElementRef(originElement);
       strategy = positionBuilder.connectedTo(
           fakeElementRef,
@@ -655,7 +655,7 @@ describe('ConnectedPositionStrategy', () => {
       overlayContainerElement.appendChild(overlayElement);
 
       fakeElementRef = new FakeElementRef(originElement);
-      positionBuilder = new OverlayPositionBuilder(viewportRuler);
+      positionBuilder = new OverlayPositionBuilder(viewportRuler, document);
     });
 
     afterEach(() => {

src/cdk/overlay/position/connected-position-strategy.ts

@@ -80,7 +80,8 @@ export class ConnectedPositionStrategy implements PositionStrategy {
       originPos: OriginConnectionPosition,
       overlayPos: OverlayConnectionPosition,
       private _connectedTo: ElementRef,
-      private _viewportRuler: ViewportRuler) {
+      private _viewportRuler: ViewportRuler,
+      private _document: any) {
     this._origin = this._connectedTo.nativeElement;
     this.withFallbackPosition(originPos, overlayPos);
   }
@@ -359,7 +360,7 @@ export class ConnectedPositionStrategy implements PositionStrategy {
     // from the bottom of the viewport rather than the top.
     let y = verticalStyleProperty === 'top' ?
         overlayPoint.y :
-        document.documentElement.clientHeight - (overlayPoint.y + overlayRect.height);
+        this._document.documentElement.clientHeight - (overlayPoint.y + overlayRect.height);
 
     // We want to set either `left` or `right` based on whether the overlay wants to appear "before"
     // or "after" the origin, which determines the direction in which the element will expand.
@@ -376,7 +377,7 @@ export class ConnectedPositionStrategy implements PositionStrategy {
     // from the right edge of the viewport rather than the left edge.
     let x = horizontalStyleProperty === 'left' ?
       overlayPoint.x :
-      document.documentElement.clientWidth - (overlayPoint.x + overlayRect.width);
+      this._document.documentElement.clientWidth - (overlayPoint.x + overlayRect.width);
 
 
     // Reset any existing styles. This is necessary in case the preferred position has

src/cdk/overlay/position/global-position-strategy.spec.ts

@@ -8,7 +8,7 @@ describe('GlobalPositonStrategy', () => {
 
   beforeEach(() => {
     element = document.createElement('div');
-    strategy = new GlobalPositionStrategy();
+    strategy = new GlobalPositionStrategy(document);
     document.body.appendChild(element);
     strategy.attach({overlayElement: element} as OverlayRef);
   });

src/cdk/overlay/position/global-position-strategy.ts

@@ -33,6 +33,8 @@ export class GlobalPositionStrategy implements PositionStrategy {
   /* A lazily-created wrapper for the overlay element that is used as a flex container.  */
   private _wrapper: HTMLElement | null = null;
 
+  constructor(private _document: any) {}
+
   attach(overlayRef: OverlayRef): void {
     this._overlayRef = overlayRef;
   }
@@ -147,10 +149,10 @@ export class GlobalPositionStrategy implements PositionStrategy {
     const element = this._overlayRef.overlayElement;
 
     if (!this._wrapper && element.parentNode) {
-      this._wrapper = document.createElement('div');
-      this._wrapper.classList.add('cdk-global-overlay-wrapper');
-      element.parentNode.insertBefore(this._wrapper, element);
-      this._wrapper.appendChild(element);
+      this._wrapper = this._document.createElement('div');
+      this._wrapper!.classList.add('cdk-global-overlay-wrapper');
+      element.parentNode.insertBefore(this._wrapper!, element);
+      this._wrapper!.appendChild(element);
     }
 
     let styles = element.style;