animation trigger "transformMenu" has failed to build #7101
Comments
|
@crisbeto is this one of the things you encountered on your 5.0 branch? |
|
I didn't encounter it in beta.6, I haven't tried it in beta.7 yet. |
|
I am experiencing this too in Angular 5 rc.0 during Jest unit tests |
|
Still here in beta.12 |
|
Any updates on this one? Workarounds? |
|
I haven't been able to reproduce it against our demo app with Angular 5.0.0-rc.8. |
|
Sorry, I have a similar issue. The animation trigger "transitionMessages" has failed to build due to the following errors: |
|
Using latest Angular I guess, PhantomJS should finally upgrade it's obsolete QtWebKit engine... |
|
FWIW, you should be able to switch to Chrome Headless @udos86. |
|
I can create a branch to show this... |
|
@crisbeto Yep, thanks, exactly what I'm going to do next... |
|
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. |
|
experienced the same problem here. |
|
Material |
With the update to Angular 5, PhantomJS fails to run the tests due to errors with the 'transform' css property. Chrome still works, so switch the tests to use ChromeHeadless instead of PhantomJS. The only issue with running tests on Chrome is that it needs a higher timeout, because Angular tests are slow to start See bugs here: angular/components#7101 angular/angular#18921 angular/angular#17938
|
Is anyone able to provide a reproduction for this? We haven't been able to reproduce. |
jelbourn
added
the
cannot reproduce
|
I can paste the stack trace during a Jest test: |
|
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. |
|
@patrickmichalina have you tried using the |
|
@crisbeto I did, but will try once more. I just commented-out |
|
@crisbeto |
|
Issue was resolved for me by switching from PhantomJS to ChromeHeadless (using NoopAnimationsModule) |
|
@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. |
|
I hit this too with Jest. Jest uses Interestingly though, |
|
Closing as something that we can't really fix on Material's side, apart from removing the animation altogether. |
|
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 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. |
|
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. |
|
@marcojahn thanks! Can verify this fixes the issue when using Jest |
@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. |
|
@kblestarge ths error happens for any browsers that don't support CSS transforms. Material doesn't support any of those browsers. |
|
@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. |
|
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. |
In order to run tests in an automated environment, we need some way to run headless tests. The only issue with running tests on ChromeHeadless is that it needs a higher timeout, because Angular tests are slow to start See bugs here: angular/components#7101 angular/angular#18921 angular/angular#17938
|
(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. |
|
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? |
|
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.
|
|
Thanks @marcojahn |
|
seems to be fixed here: angular/angular#19055 |
|
@marcojahn Thank you so much for this fix for jest ! Saved me hours of debugging ! |
|
thanks @marcojahn |
|
Thanks @marcojahn 👍 |
|
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. |
|
@marcojahn Not sure whether 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
});❓🤔💭 |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
and others
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?
material-moduleWhich 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!
The text was updated successfully, but these errors were encountered: