From b492b9e12bf5df09a729354d6c53ecd62a71a44f Mon Sep 17 00:00:00 2001 From: Vikram Subramanian Date: Tue, 29 May 2018 13:34:10 -0700 Subject: [PATCH] fix(animations): Fix browser detection logic (#24188) Element type is being polyfilled on the server now and cannot be used to detect browser environment. PR Close #24188 --- packages/animations/browser/src/render/shared.ts | 6 +++++- .../src/render/web_animations/web_animations_driver.ts | 4 ++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/animations/browser/src/render/shared.ts b/packages/animations/browser/src/render/shared.ts index 7836992d17..7cb2f7a033 100644 --- a/packages/animations/browser/src/render/shared.ts +++ b/packages/animations/browser/src/render/shared.ts @@ -10,6 +10,10 @@ import {AUTO_STYLE, AnimationEvent, AnimationPlayer, NoopAnimationPlayer, ɵAnim import {AnimationStyleNormalizer} from '../../src/dsl/style_normalization/animation_style_normalizer'; import {AnimationDriver} from '../../src/render/animation_driver'; +export function isBrowser() { + return (typeof window !== 'undefined' && typeof window.document !== 'undefined'); +} + export function optimizeGroupPlayer(players: AnimationPlayer[]): AnimationPlayer { switch (players.length) { case 0: @@ -138,7 +142,7 @@ let _query: (element: any, selector: string, multi: boolean) => any[] = return []; }; -if (typeof Element != 'undefined') { +if (isBrowser()) { // this is well supported in all browsers _contains = (elm1: any, elm2: any) => { return elm1.contains(elm2) as boolean; }; diff --git a/packages/animations/browser/src/render/web_animations/web_animations_driver.ts b/packages/animations/browser/src/render/web_animations/web_animations_driver.ts index f4063ddf9a..2d2e81c2f9 100644 --- a/packages/animations/browser/src/render/web_animations/web_animations_driver.ts +++ b/packages/animations/browser/src/render/web_animations/web_animations_driver.ts @@ -10,7 +10,7 @@ import {AnimationPlayer, ɵStyleData} from '@angular/animations'; import {allowPreviousPlayerStylesMerge, balancePreviousStylesIntoKeyframes, copyStyles} from '../../util'; import {AnimationDriver} from '../animation_driver'; import {CssKeyframesDriver} from '../css_keyframes/css_keyframes_driver'; -import {containsElement, invokeQuery, matchesElement, validateStyleProperty} from '../shared'; +import {containsElement, invokeQuery, isBrowser, matchesElement, validateStyleProperty} from '../shared'; import {WebAnimationsPlayer} from './web_animations_player'; @@ -75,5 +75,5 @@ export function supportsWebAnimations() { } function getElementAnimateFn(): any { - return (typeof Element !== 'undefined' && (Element).prototype['animate']) || {}; + return (isBrowser() && (Element).prototype['animate']) || {}; }