fix(form-field): server-side rendering error with outline appearance (#10719)

Fixes an error when rendering an outline form field on the server.

Fixes #10719.

Author: crisbeto

src/lib/form-field/form-field.ts

@@ -48,6 +48,7 @@ import {MatLabel} from './label';
 import {MatPlaceholder} from './placeholder';
 import {MatPrefix} from './prefix';
 import {MatSuffix} from './suffix';
+import {Platform} from '@angular/cdk/platform';
 
 
 let nextUniqueId = 0;
@@ -217,7 +218,9 @@ export class MatFormField extends _MatFormFieldMixinBase
       @Optional() @Inject(MAT_LABEL_GLOBAL_OPTIONS) labelOptions: LabelOptions,
       @Optional() private _dir: Directionality,
       @Optional() @Inject(MAT_FORM_FIELD_DEFAULT_OPTIONS) private _defaultOptions:
-          MatFormFieldDefaultOptions) {
+          MatFormFieldDefaultOptions,
+      // @deletion-target 7.0.0 _platform to be made required.
+      private _platform?: Platform) {
     super(_elementRef);
 
     this._labelOptions = labelOptions ? labelOptions : {};
@@ -412,6 +415,11 @@ export class MatFormField extends _MatFormFieldMixinBase
    */
   updateOutlineGap() {
     if (this.appearance === 'outline' && this._label && this._label.nativeElement.children.length) {
+      if (this._platform && !this._platform.isBrowser) {
+        // getBoundingClientRect isn't available on the server.
+        return;
+      }
+
       const containerStart = this._getStartEnd(
           this._connectionContainerRef.nativeElement.getBoundingClientRect());
       const labelStart = this._getStartEnd(

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

@@ -115,6 +115,11 @@ <h2>Input</h2>
   <input matInput placeholder="name" type="text">
 </mat-form-field>
 
+<mat-form-field appearance="outline">
+  <mat-label>Surname</mat-label>
+  <input matInput value="Baggins">
+</mat-form-field>
+
 <mat-form-field>
   <textarea matInput placeholder="description"></textarea>
 </mat-form-field>