fix(overlay): server-side rendering error when creating backdrop element

Avoids a couple of server-side rendering errors when the overlay's backdrop is being created.
angular · Jan 17, 2018 · 3581f0f · 3581f0f
1 parent ac244d9
commit 3581f0f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/src/cdk/overlay/overlay-ref.ts b/src/cdk/overlay/overlay-ref.ts
@@ -39,7 +39,8 @@ export class OverlayRef implements PortalOutlet {
       private _pane: HTMLElement,
       private _config: ImmutableObject<OverlayConfig>,
       private _ngZone: NgZone,
-      private _keyboardDispatcher: OverlayKeyboardDispatcher) {
+      private _keyboardDispatcher: OverlayKeyboardDispatcher,
+      private _document: Document) {
 
     if (_config.scrollStrategy) {
       _config.scrollStrategy.attach(this);
@@ -259,7 +260,9 @@ export class OverlayRef implements PortalOutlet {
 
   /** Attaches a backdrop for this overlay. */
   private _attachBackdrop() {
-    this._backdropElement = document.createElement('div');
+    const showingClass = 'cdk-overlay-backdrop-showing';
+
+    this._backdropElement = this._document.createElement('div');
     this._backdropElement.classList.add('cdk-overlay-backdrop');
 
     if (this._config.backdropClass) {
@@ -275,13 +278,13 @@ export class OverlayRef implements PortalOutlet {
     this._backdropElement.addEventListener('click', () => this._backdropClick.next(null));
 
     // Add class to fade-in the backdrop after one frame.
-    this._ngZone.runOutsideAngular(() => {
-      requestAnimationFrame(() => {
-        if (this._backdropElement) {
-          this._backdropElement.classList.add('cdk-overlay-backdrop-showing');
-        }
+    if (typeof requestAnimationFrame !== 'undefined') {
+      this._ngZone.runOutsideAngular(() => {
+        requestAnimationFrame(() => this._backdropElement!.classList.add(showingClass));
       });
-    });
+    } else {
+      this._backdropElement.classList.add(showingClass);
+    }
   }
 
   /**

diff --git a/src/cdk/overlay/overlay.ts b/src/cdk/overlay/overlay.ts
@@ -61,7 +61,14 @@ export class Overlay {
   create(config: OverlayConfig = defaultConfig): OverlayRef {
     const pane = this._createPaneElement();
     const portalOutlet = this._createPortalOutlet(pane);
-    return new OverlayRef(portalOutlet, pane, config, this._ngZone, this._keyboardDispatcher);
+    return new OverlayRef(
+      portalOutlet,
+      pane,
+      config,
+      this._ngZone,
+      this._keyboardDispatcher,
+      this._document
+    );
   }
 
   /**