From 6d9ed8a326b11eef4fae6ed8ad7ce891112e1f00 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Thu, 19 Apr 2018 11:45:00 -0600
Subject: [PATCH] fix(bottom-sheet): server-side rendering error when opened
 (#10487)

* Fixes a server-side rendering error when opening a bottom sheet.
* Adds the bottom sheet to the prerender CI check.
---
 src/lib/bottom-sheet/bottom-sheet-container.ts |  6 +++++-
 src/universal-app/kitchen-sink/kitchen-sink.ts | 15 ++++++++++-----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/lib/bottom-sheet/bottom-sheet-container.ts b/src/lib/bottom-sheet/bottom-sheet-container.ts
index aab2a3da608..9753e15d0cf 100644
--- a/src/lib/bottom-sheet/bottom-sheet-container.ts
+++ b/src/lib/bottom-sheet/bottom-sheet-container.ts
@@ -207,6 +207,10 @@ export class MatBottomSheetContainer extends BasePortalOutlet implements OnDestr
   /** Saves a reference to the element that was focused before the bottom sheet was opened. */
   private _savePreviouslyFocusedElement() {
     this._elementFocusedBeforeOpened = this._document.activeElement as HTMLElement;
-    Promise.resolve().then(() => this._elementRef.nativeElement.focus());
+
+    // The `focus` method isn't available during server-side rendering.
+    if (this._elementRef.nativeElement.focus) {
+      Promise.resolve().then(() => this._elementRef.nativeElement.focus());
+    }
   }
 }
diff --git a/src/universal-app/kitchen-sink/kitchen-sink.ts b/src/universal-app/kitchen-sink/kitchen-sink.ts
index f6abef8e2f4..ab80a9fc1f3 100644
--- a/src/universal-app/kitchen-sink/kitchen-sink.ts
+++ b/src/universal-app/kitchen-sink/kitchen-sink.ts
@@ -7,6 +7,7 @@ import {Component, ElementRef, NgModule} from '@angular/core';
 import {
   MatAutocompleteModule,
   MatBadgeModule,
+  MatBottomSheetModule,
   MatButtonModule,
   MatButtonToggleModule,
   MatCardModule,
@@ -41,6 +42,7 @@ import {
   MatTabsModule,
   MatToolbarModule,
   MatTooltipModule,
+  MatBottomSheet,
 } from '@angular/material';
 import {BrowserModule} from '@angular/platform-browser';
 import {ServerModule} from '@angular/platform-server';
@@ -59,7 +61,7 @@ export class TableDataSource extends DataSource<any> {
 @Component({
   template: `<button>Do the thing</button>`
 })
-export class TestDialog {}
+export class TestEntryComponent {}
 
 
 @Component({
@@ -80,10 +82,12 @@ export class KitchenSink {
     dialog: MatDialog,
     viewportRuler: ViewportRuler,
     focusMonitor: FocusMonitor,
-    elementRef: ElementRef<HTMLElement>) {
+    elementRef: ElementRef<HTMLElement>,
+    bottomSheet: MatBottomSheet) {
     focusMonitor.focusVia(elementRef.nativeElement, 'program');
     snackBar.open('Hello there');
-    dialog.open(TestDialog);
+    dialog.open(TestEntryComponent);
+    bottomSheet.open(TestEntryComponent);
 
     // Do a sanity check on the viewport ruler.
     viewportRuler.getViewportRect();
@@ -98,6 +102,7 @@ export class KitchenSink {
     BrowserModule.withServerTransition({appId: 'kitchen-sink'}),
     MatAutocompleteModule,
     MatBadgeModule,
+    MatBottomSheetModule,
     MatButtonModule,
     MatButtonToggleModule,
     MatCardModule,
@@ -135,8 +140,8 @@ export class KitchenSink {
     CdkTableModule
   ],
   bootstrap: [KitchenSink],
-  declarations: [KitchenSink, TestDialog],
-  entryComponents: [TestDialog],
+  declarations: [KitchenSink, TestEntryComponent],
+  entryComponents: [TestEntryComponent],
 })
 export class KitchenSinkClientModule { }