animation trigger "transformMenu" has failed to build

Question

animation trigger "transformMenu" has failed to build

GaryB432 opened this issue 8 years ago · 43 comments

GaryB432 commented 8 years ago

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!

Answer 1 · 2017-09-15T23:43:42.000Z

@crisbeto is this one of the things you encountered on your 5.0 branch?

Answer 2 · 2017-09-16T15:28:54.000Z

I didn't encounter it in beta.6, I haven't tried it in beta.7 yet.

Answer 3 · 2017-09-30T02:18:13.000Z

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

Answer 4 · 2017-10-06T01:28:34.000Z

Still here in beta.12

Answer 5 · 2017-10-21T13:22:25.000Z

Any updates on this one? Workarounds?

Answer 6 · 2017-10-29T11:48:40.000Z

I haven't been able to reproduce it against our demo app with Angular 5.0.0-rc.8.

Answer 7 · 2017-10-31T08:33:32.000Z

Sorry, I have a similar issue.

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

Answer 8 · 2017-10-31T19:16:43.000Z

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...

Answer 9 · 2017-10-31T19:19:03.000Z

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

Answer 10 · 2017-10-31T19:20:11.000Z

I can create a branch to show this...

Answer 11 · 2017-10-31T19:22:00.000Z

@crisbeto Yep, thanks, exactly what I'm going to do next...

Answer 12 · 2017-10-31T19:24:25.000Z

If anybody wants to try against the Material branch that introduces Angular 5 support, you can see #6018 however code-wise not much has changed, it's mostly a couple of AoT and unit test failures.

Answer 13 · 2017-11-06T14:29:42.000Z

experienced the same problem here.

Answer 14 · 2017-11-08T04:00:07.000Z

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

Answer 15 · 2017-11-08T22:27:30.000Z

Is anyone able to provide a reproduction for this? We haven't been able to reproduce.

Answer 16 · 2017-11-09T01:06:27.000Z

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)

Answer 17 · 2017-11-09T01:20:53.000Z

Line 37 of this test is skipped in order for the build to pass, but unskipping it yields the error. This repo has the latest and greatest libraries and Angular installed.

https://github.com/patrickmichalina/fusebox-angular-universal-starter/blob/master/src/client/app/%2Babout/about.component.spec.ts

Answer 18 · 2017-11-09T01:23:55.000Z

@patrickmichalina have you tried using the NoopAnimationsModule in your tests instead of the BrowserAnimationsModule?

Answer 19 · 2017-11-09T01:25:41.000Z

@crisbeto I did, but will try once more. I just commented-out mat-form-field elements, and the error does NOT occur.

Answer 20 · 2017-11-09T01:26:44.000Z

@crisbeto NoopAnimationsModule still fails

Answer 21 · 2017-11-09T19:02:20.000Z

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

Answer 22 · 2017-11-09T19:11:30.000Z

@Torqode while I am sure that is a solution, Jest is a great test runner and would rather not switch for a single library failure. I am hoping the material team can solve this.

Answer 23 · 2017-11-09T19:26:09.000Z

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.

Answer 24 · 2017-11-09T19:40:19.000Z

Closing as something that we can't really fix on Material's side, apart from removing the animation altogether.

Answer 25 · 2017-11-10T07:50:48.000Z

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 :)

Answer 26 · 2017-11-13T07:51:19.000Z

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.

Answer 27 · 2017-11-14T14:26:48.000Z

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.

Answer 28 · 2017-11-14T16:17:23.000Z

@marcojahn thanks! Can verify this fixes the issue when using Jest

Answer 29 · 2017-11-14T17:05:53.000Z

Closing as something that we can't really fix on Material's side, apart from removing the animation altogether.

@crisbeto are you sure there is nothing the Material team can do? I use Sentry for my front-end error tracking and it's blowing up with this error on production.

The solution from @marcojahn doesn't shut the error up outside of a testing environment.

I need a solid fix.

Answer 30 · 2017-11-14T17:13:43.000Z

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

Answer 31 · 2017-11-14T17:24:09.000Z

@crisbeto, you are right but people use browsers like PhantomJS to test Material apps on headless CI servers, so they are going to run into this issue, unfortunately. I think it warrants at least a FAQ item.

Answer 32 · 2017-11-14T17:31:50.000Z

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.

Answer 33 · 2017-11-20T23:33:45.000Z

(copied from my reply here: angular/angular#20415 (comment))

This fails not only in PhantomJS, but in Safari <= 8. Would be good to update the browser support page if these are not supported anymore (https://angular.io/guide/browser-support)

An easy way to repro is to use Browserstack => Yosemite => Safari 8 (latest) => go to https://angular.io and see app crash with these errors logged.

Answer 34 · 2017-11-22T18:25:41.000Z

I thought using this polyfill would stop the 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?

Answer 35 · 2017-11-22T21:37:08.000Z

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 ***@***.***> 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.

Answer 36 · 2017-12-07T12:42:24.000Z

Thanks @marcojahn

Answer 37 · 2017-12-11T09:11:58.000Z

seems to be fixed here: angular/angular#19055

Answer 38 · 2018-01-15T13:20:15.000Z

@marcojahn Thank you so much for this fix for jest ! Saved me hours of debugging !

Answer 39 · 2018-02-08T10:24:27.000Z

thanks @marcojahn

Answer 40 · 2018-02-17T22:09:56.000Z

Thanks @marcojahn 👍

Answer 41 · 2018-05-09T14:16:21.000Z

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.

Answer 42 · 2018-09-01T15:56:36.000Z

@marcojahn Not sure whether configurable and enumerable props are significant there like in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty, but I'm just wondering why:

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

instead of:

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

❓🤔💭

Answer 43 · 2019-09-09T13:02:13.000Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}