fix(progress-spinner, progress-bar): Do not prevent animations while SSR

Author: josephperrott

src/lib/progress-bar/progress-bar.ts

@@ -16,6 +16,7 @@ import {
 } from '@angular/core';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {CanColor, mixinColor} from '@angular/material/core';
+import {Platform} from '@angular/cdk/platform';
 
 // TODO(josephperrott): Benchpress tests.
 // TODO(josephperrott): Add ARIA attributes for progress bar "for".
@@ -45,7 +46,7 @@ let progressbarId = 0;
     '[attr.aria-valuenow]': 'value',
     '[attr.mode]': 'mode',
     'class': 'mat-progress-bar',
-    '[class._mat-animation-noopable]': `_animationMode === 'NoopAnimations'`,
+    '[class._mat-animation-noopable]': `_noopAnimations`,
   },
   inputs: ['color'],
   templateUrl: 'progress-bar.html',
@@ -55,9 +56,13 @@ let progressbarId = 0;
 })
 export class MatProgressBar extends _MatProgressBarMixinBase implements CanColor {
 
+  /** Whether the _mat-animation-noopable class should be applied, disabling animations.  */
+  _noopAnimations: boolean =
+    this.animationMode === 'NoopAnimations' && !!this.platform && this.platform.isBrowser;
 
   constructor(public _elementRef: ElementRef,
-              @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
+              @Optional() @Inject(ANIMATION_MODULE_TYPE) public animationMode?: string,
+              @Optional() private platform?: Platform) {
     super(_elementRef);
   }
 

src/lib/progress-spinner/progress-spinner.ts

@@ -81,7 +81,7 @@ const INDETERMINATE_ANIMATION_TEMPLATE = `
   host: {
     'role': 'progressbar',
     'class': 'mat-progress-spinner',
-    '[class._mat-animation-noopable]': `_animationMode === 'NoopAnimations'`,
+    '[class._mat-animation-noopable]': `_noopAnimations`,
     '[style.width.px]': 'diameter',
     '[style.height.px]': 'diameter',
     '[attr.aria-valuemin]': 'mode === "determinate" ? 0 : null',
@@ -110,6 +110,9 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
    */
   private static styleTag: HTMLStyleElement|null = null;
 
+  /** Whether the _mat-animation-noopable class should be applied, disabling animations.  */
+  _noopAnimations: boolean = this.animationMode === 'NoopAnimations' && this.platform.isBrowser;
+
   /** The diameter of the progress spinner (will set width and height of svg). */
   @Input()
   get diameter(): number { return this._diameter; }
@@ -145,9 +148,9 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
   }
 
   constructor(public _elementRef: ElementRef,
-              platform: Platform,
+              public platform: Platform,
               @Optional() @Inject(DOCUMENT) private _document: any,
-              @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
+              @Optional() @Inject(ANIMATION_MODULE_TYPE) private animationMode?: string) {
 
     super(_elementRef);
     this._fallbackAnimation = platform.EDGE || platform.TRIDENT;
@@ -236,7 +239,7 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
     'role': 'progressbar',
     'mode': 'indeterminate',
     'class': 'mat-spinner mat-progress-spinner',
-    '[class._mat-animation-noopable]': `_animationMode === 'NoopAnimations'`,
+    '[class._mat-animation-noopable]': `_noopAnimations`,
     '[style.width.px]': 'diameter',
     '[style.height.px]': 'diameter',
   },
@@ -249,8 +252,8 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
 export class MatSpinner extends MatProgressSpinner {
   constructor(elementRef: ElementRef, platform: Platform,
               @Optional() @Inject(DOCUMENT) document: any,
-              @Optional() @Inject(ANIMATION_MODULE_TYPE) _animationMode?: string) {
-    super(elementRef, platform, document, _animationMode);
+              @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
+    super(elementRef, platform, document, animationMode);
     this.mode = 'indeterminate';
   }
 }