fix(material-experimental): mdc-slider should not throw when rendering on the server (#16993)

Follow-up to the initial mdc-slider prototype implementation. This commit adds the mdc-slider
to the universal-app test and also fixes issues that prevented the slider to be rendered on
the server.

Author: devversion

src/material-experimental/mdc-slider/BUILD.bazel

@@ -13,6 +13,9 @@ ng_module(
     assets = [":slider_scss"] + glob(["**/*.html"]),
     module_name = "@angular/material-experimental/mdc-slider",
     deps = [
+        "//src/cdk/bidi",
+        "//src/cdk/coercion",
+        "//src/cdk/platform",
         "//src/material/core",
         "@npm//@angular/forms",
         "@npm//@material/slider",

src/material-experimental/mdc-slider/slider.ts

@@ -8,7 +8,7 @@
 
 import {Directionality} from '@angular/cdk/bidi';
 import {coerceBooleanProperty, coerceNumberProperty} from '@angular/cdk/coercion';
-import {normalizePassiveListenerOptions} from '@angular/cdk/platform';
+import {normalizePassiveListenerOptions, Platform} from '@angular/cdk/platform';
 import {
   AfterViewInit,
   Attribute,
@@ -322,8 +322,11 @@ export class MatSlider implements AfterViewInit, OnChanges, OnDestroy, ControlVa
   @ViewChild('trackMarker', {static: false}) _trackMarker: ElementRef<HTMLElement>;
 
   constructor(
-      private _elementRef: ElementRef<HTMLElement>, private _changeDetectorRef: ChangeDetectorRef,
-      private _ngZone: NgZone, @Optional() private _dir: Directionality,
+      private _elementRef: ElementRef<HTMLElement>,
+      private _changeDetectorRef: ChangeDetectorRef,
+      private _ngZone: NgZone,
+      private _platform: Platform,
+      @Optional() private _dir: Directionality,
       @Attribute('tabindex') tabIndex: string,
       @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
     this.tabIndex = parseInt(tabIndex) || 0;
@@ -342,19 +345,28 @@ export class MatSlider implements AfterViewInit, OnChanges, OnDestroy, ControlVa
 
   ngAfterViewInit() {
     this._isInitialized = true;
-    this._foundation.init();
 
-    // The standard Angular Material slider is always using discrete values. We always
-    // want to enable discrete values and support ticks, but want to still provide
-    // non-discrete slider visual looks if thumb label is disabled.
-    // TODO(devversion): check if we can get a public API for this.
-    // Tracked with: https://github.com/material-components/material-components-web/issues/5020
-    (this._foundation as any).isDiscrete_ = true;
+    if (this._platform.isBrowser) {
+      // The MDC slider foundation accesses DOM globals, so we cannot initialize the
+      // foundation on the server. The foundation would be needed to move the thumb
+      // to the proper position and to render the ticks.
+      this._foundation.init();
+
+      // The standard Angular Material slider is always using discrete values. We always
+      // want to enable discrete values and support ticks, but want to still provide
+      // non-discrete slider visual looks if thumb label is disabled.
+      // TODO(devversion): check if we can get a public API for this.
+      // Tracked with: https://github.com/material-components/material-components-web/issues/5020
+      (this._foundation as any).isDiscrete_ = true;
+
+      // These bindings cannot be synced in the foundation, as the foundation is not
+      // initialized and they cause DOM globals to be accessed (to move the thumb)
+      this._syncStep();
+      this._syncValue();
+      this._syncMax();
+      this._syncMin();
+    }
 
-    this._syncStep();
-    this._syncValue();
-    this._syncMax();
-    this._syncMin();
     this._syncDisabled();
   }
 
@@ -385,7 +397,11 @@ export class MatSlider implements AfterViewInit, OnChanges, OnDestroy, ControlVa
 
   ngOnDestroy() {
     this._dirChangeSubscription.unsubscribe();
-    this._foundation.destroy();
+    // The foundation cannot be destroyed on the server, as the foundation
+    // has not be initialized on the server.
+    if (this._platform.isBrowser) {
+      this._foundation.destroy();
+    }
   }
 
   /** Focuses the slider. */

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

@@ -49,3 +49,9 @@ <h2>MDC slide-toggle</h2>
 <mat-slide-toggle checked></mat-slide-toggle>
 <mat-slide-toggle checked disabled></mat-slide-toggle>
 <mat-slide-toggle>with a label</mat-slide-toggle>
+
+<h2>Slider</h2>
+<mat-slider></mat-slider>
+<mat-slider value="50"></mat-slider>
+<mat-slider tickInterval="1" min="1" max="10" value="5" thumbLabel></mat-slider>
+<mat-slider disabled></mat-slider>

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

@@ -6,6 +6,7 @@ import {MatChipsModule} from '@angular/material-experimental/mdc-chips';
 import {MatMenuModule} from '@angular/material-experimental/mdc-menu';
 import {MatRadioModule} from '@angular/material-experimental/mdc-radio';
 import {MatSlideToggleModule} from '@angular/material-experimental/mdc-slide-toggle';
+import {MatSliderModule} from '@angular/material-experimental/mdc-slider';
 import {MatTabsModule} from '@angular/material-experimental/mdc-tabs';
 import {MatIconModule} from '@angular/material/icon';
 
@@ -26,6 +27,7 @@ export class KitchenSinkMdc {
     MatMenuModule,
     MatRadioModule,
     MatSlideToggleModule,
+    MatSliderModule,
     MatTabsModule,
   ],
   declarations: [KitchenSinkMdc],

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

@@ -208,6 +208,7 @@ <h2>Slider</h2>
 <mat-slider></mat-slider>
 <mat-slider value="50"></mat-slider>
 <mat-slider tickInterval="1" min="1" max="10" value="5" thumbLabel></mat-slider>
+<mat-slider disabled></mat-slider>
 
 <h2>Tabs</h2>
 <mat-tab-group>