fix(dialog): server-side rendering error when attempting to trap focus (#9698)

Fixes an error that is being thrown when trying to open a dialog on the server. Also adds a dialog sanity check to the kitchen sink.

Relates to #9066.

Author: crisbeto

src/lib/dialog/dialog-container.ts

@@ -163,10 +163,13 @@ export class MatDialogContainer extends BasePortalOutlet {
     if (this._document) {
       this._elementFocusedBeforeDialogWasOpened = this._document.activeElement as HTMLElement;
 
-      // Move focus onto the dialog immediately in order to prevent the user from accidentally
-      // opening multiple dialogs at the same time. Needs to be async, because the element
-      // may not be focusable immediately.
-      Promise.resolve().then(() => this._elementRef.nativeElement.focus());
+      // Note that there is no focus method when rendering on the server.
+      if (this._elementRef.nativeElement.focus) {
+        // Move focus onto the dialog immediately in order to prevent the user from accidentally
+        // opening multiple dialogs at the same time. Needs to be async, because the element
+        // may not be focusable immediately.
+        Promise.resolve().then(() => this._elementRef.nativeElement.focus());
+      }
     }
   }
 

src/universal-app/kitchen-sink/kitchen-sink.ts

@@ -36,14 +36,23 @@ import {
   MatTooltipModule,
   MatStepperModule,
   MatSnackBar,
+  MatDialog,
 } from '@angular/material';
 import {
   CdkTableModule,
   DataSource
 } from '@angular/cdk/table';
+import {Overlay} from '@angular/cdk/overlay';
 
 import {of as observableOf} from 'rxjs/observable/of';
 
+
+@Component({
+  template: `<button>Do the thing</button>`
+})
+export class TestDialog {}
+
+
 @Component({
   selector: 'kitchen-sink',
   templateUrl: './kitchen-sink.html',
@@ -60,9 +69,13 @@ export class KitchenSink {
     disconnect: () => {}
   };
 
-  constructor(snackBar: MatSnackBar) {
+  constructor(snackBar: MatSnackBar, dialog: MatDialog, overlay: Overlay) {
     // Open a snack bar to do a basic sanity check of the overlays.
     snackBar.open('Hello there');
+
+    // TODO(crisbeto): use the noop scroll strategy until
+    // the fixes for the block scroll strategy get in.
+    dialog.open(TestDialog, {scrollStrategy: overlay.scrollStrategies.noop()});
   }
 
 }
@@ -109,7 +122,8 @@ export class KitchenSink {
     CdkTableModule
   ],
   bootstrap: [KitchenSink],
-  declarations: [KitchenSink],
+  declarations: [KitchenSink, TestDialog],
+  entryComponents: [TestDialog],
 })
 export class KitchenSinkClientModule { }