components: animation trigger "transformMenu" has failed to build

Bug, feature request, or proposal:

Bug or unclear documentation

What is the expected behavior?

Either the same tests work with Angular 5 or there is documentation for a breaking change

What is the current behavior?

I upgraded Angular as detailed below and a unit test started failing

Error: The animation trigger “transformMenu” has failed to build due to the following errors: The provided animation property “transform” is not a supported CSS property for animations The provided animation property “transform” is not a supported CSS property for animations The provided animation property “transform” is not a supported CSS property for animations in http://localhost:9876/_karma_webpack_/vendor.bundle.js (line 21927)

What are the steps to reproduce?

  • Develop a project with the versions below
  • Add many md components to a shared material-module
  • import the module into several components and tests
  • iterate for months observing passing tests
  • upgrade angular as mentioned below
  • observe failing test

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

material 2.0.0-beta.10 angular 4.2.4 cli 1.3.2 TypeScript 2.5 OS Windows 7 (I’m at the office!)

upgraded to angular 5.0.0-beta-7 and test throws as mentioned above

Thanks for Angular Material, team!

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 8
  • Comments: 43 (11 by maintainers)

Commits related to this issue

Most upvoted comments

Sorry, for commenting on a closed issue but got the same error when upgrading to Angular 5 using JEST.

added the following snippet to the “Jest global mocks” list will add the missing behaviour to your JSDom instance.

Object.defineProperty(document.body.style, 'transform', {
  value: () => {
    return {
      enumerable: true,
      configurable: true
    };
  },
});

Bot a perfect solution but still keeps my tests alive 😃

I am experiencing this too in Angular 5 rc.0 during Jest unit tests

Material 5.0.0-rc0 doesn’t seem to have fixed it. Still an issue with Angular 5.0.0.

Still facing the issue with Angular 6 and Jest. I don’t know if the fix provided by @marcojahn would hold in production environment. @crisbeto shouldn’t the material team address this issue now. This issue persists with every Angular release when testing with Jest.

@kblestarge ths error happens for any browsers that don’t support CSS transforms. Material doesn’t support any of those browsers.

I can’t see why this issue was closed without anything else said except it isn’t the Material’s issue.

Then why do I see this issue after using Angular 5 and latest RC of Angular Material2 in Karma tests? Without Material, I don’t have the issue at all.

I can paste the stack trace during a Jest test:

The animation trigger "transitionMessages" has failed to build due to the following errors:
 - The provided animation property "transform" is not a supported CSS property for animations
 - The provided animation property "transform" is not a supported CSS property for animations
  
  at InjectableAnimationEngine.Object.<anonymous>.AnimationEngine.registerTrigger (node_modules/packages/animations/esm5/browser/src/render/animation_engine_next.js:50:14)
  at node_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.js:329:33
      at Array.forEach (<anonymous>)
  at AnimationRendererFactory.Object.<anonymous>.AnimationRendererFactory.createRenderer (node_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.js:328:27)
  at DebugRendererFactory2.Object.<anonymous>.DebugRendererFactory2.createRenderer (node_modules/packages/core/esm5/src/view/services.js:877:42)
  at createComponentView (node_modules/@angular/core/bundles/core.umd.js:13395:56)
  at callWithDebugContext (node_modules/packages/core/esm5/src/view/services.js:843:6)
  at Object.debugCreateComponentView [as createComponentView] (node_modules/@angular/core/bundles/core.umd.js:14120:12)
  at createViewNodes (node_modules/packages/core/esm5/src/view/view.js:288:36)
  at callViewAction (node_modules/@angular/core/bundles/core.umd.js:13920:13)
  at execComponentViewsAction (node_modules/@angular/core/bundles/core.umd.js:13829:13)
  at createViewNodes (node_modules/@angular/core/bundles/core.umd.js:13516:5)
  at createRootView (node_modules/@angular/core/bundles/core.umd.js:13378:5)
  at callWithDebugContext (node_modules/packages/core/esm5/src/view/services.js:843:6)
  at Object.debugCreateRootView [as createRootView] (node_modules/@angular/core/bundles/core.umd.js:14080:12)
  at ComponentFactory_.Object.<anonymous>.ComponentFactory_.create (node_modules/packages/core/esm5/src/view/refs.js:114:44)
  at initComponent (node_modules/packages/core/esm5/testing/src/test_bed.js:510:24)
  at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:392:26)
  at AsyncTestZoneSpec.Object.<anonymous>.AsyncTestZoneSpec.onInvoke (node_modules/zone.js/dist/async-test.js:49:39)
  at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:76:39)
  at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:391:32)
  at Object.onInvoke (node_modules/packages/core/esm5/src/zone/ng_zone.js:584:10)
  at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:391:32)
  at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/dist/zone.js:142:43)
  at NgZone.Object.<anonymous>.NgZone.run (node_modules/@angular/core/bundles/core.umd.js:4485:69)
  at TestBed.Object.<anonymous>.TestBed.createComponent (node_modules/packages/core/esm5/testing/src/test_bed.js:513:6)
  at Function.Object.<anonymous>.TestBed.createComponent (node_modules/@angular/core/bundles/core-testing.umd.js:842:29)
  at src/client/app/+about/about.component.spec.ts:23:23
  at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:392:26)
  at AsyncTestZoneSpec.Object.<anonymous>.AsyncTestZoneSpec.onInvoke (node_modules/zone.js/dist/async-test.js:49:39)
  at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:76:39)
  at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:391:32)
  at Zone.Object.<anonymous>.Zone.runGuarded (node_modules/zone.js/dist/zone.js:155:47)
  at runInTestZone (node_modules/@angular/core/bundles/core-testing.umd.js:141:25)
  at node_modules/@angular/core/bundles/core-testing.umd.js:80:13
  at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:392:26)
  at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:79:39)
  at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:391:32)
  at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/dist/zone.js:142:43)
  at Object.testBody.length.done (node_modules/jest-zone-patch/index.js:48:29)
  at new ZoneAwarePromise (node_modules/zone.js/dist/zone.js:890:29)
  at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:392:26)
  at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/dist/zone.js:142:43)
  at node_modules/zone.js/dist/zone.js:873:57
  at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invokeTask (node_modules/zone.js/dist/zone.js:425:31)
  at Zone.Object.<anonymous>.Zone.runTask (node_modules/zone.js/dist/zone.js:192:47)
  at drainMicroTaskQueue (node_modules/zone.js/dist/zone.js:602:35)
  at Object.<anonymous>.ZoneTask.invokeTask (node_modules/zone.js/dist/zone.js:503:21)
  at ZoneTask.invoke (node_modules/zone.js/dist/zone.js:488:48)
  at timer (node_modules/zone.js/dist/zone.js:2040:29)
  at Timeout.callback [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:542:19)
  at ontimeout (timers.js:475:11)
  at tryOnTimeout (timers.js:310:5)
  at Timer.listOnTimeout (timers.js:270:5)

FWIW, you should be able to switch to Chrome Headless @udos86.

Using latest Angular @5.0.0.rc-9 packages I’m experiencing this when running unit tests with PhantomJS.

I guess, PhantomJS should finally upgrade it’s obsolete QtWebKit engine…

Same here. Seeing issue in Safari 7, 8 with the web-animations-js polyfill added to my polyfills.ts file

Sent from my iPhone

On Nov 22, 2017, at 10:26 AM, Kevin LeStarge notifications@github.com wrote:

I thought using this polyfill would stop this error from happening but it does not seem to be preventing the error. I’m still seeing tons of these come through from my prod application. Any help?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

I would at least like to know how to shut up the error on unsupported browsers so I don’t have to worry about it all the time.

Thanks a bunch @marcojahn! I’m using Karma and I couldn’t find a corresponding global configuration option, so I just pasted your code at the top of my single problematic test case and it solved the problem.

I hit this too with Jest. Jest uses jsdom which in turn uses cssstyle for pseudo browser/dom/CSS testing. Turns out cssstyle doesn’t support the transform CSS property. PR was submitted to add transform a while back but the project isn’t very active.

Interestingly though, cssstyle currently supports the webkit- prefix transform props. And there is an Angular PR to get webkit prefixes supported. I think this issue will be fixed indirectly when Angular’s PR is accepted.

Issue was resolved for me by switching from PhantomJS to ChromeHeadless (using NoopAnimationsModule)

Still here in beta.12