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

…ent (#9448) Avoids a couple of server-side rendering errors when the overlay's backdrop is being created.
angular · Jan 24, 2018 · a1db4e4 · a1db4e4
1 parent f1c3e2c
commit a1db4e4
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 10 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,17 @@ 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(() => {
+          if (this._backdropElement) {
+            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
@@ -57,8 +57,15 @@ export class Overlay {
   create(config?: OverlayConfig): OverlayRef {
     const pane = this._createPaneElement();
     const portalOutlet = this._createPortalOutlet(pane);
-    return new OverlayRef(portalOutlet, pane, new OverlayConfig(config), this._ngZone,
-        this._keyboardDispatcher);
+
+    return new OverlayRef(
+      portalOutlet,
+      pane,
+      new OverlayConfig(config),
+      this._ngZone,
+      this._keyboardDispatcher,
+      this._document
+    );
   }
 
   /**