Components: animation trigger "transformMenu" has failed to build

[kostia-lev]

Bug, feature request, or proposal:

using angular 5.2, error occurs when using universal ssr renderer

What is the expected behavior?

ERROR Error: 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

What is the current behavior?

What are the steps to reproduce?

use mat-form-field, to create form

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

angular/material": "^5.2.4

Is there anything else we should know?

[kostia-lev]

I already try to mock many things using domino package

const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();
const win = domino.createWindow(template);
global['window'] = win;
global['document'] = win.document;
global['DOMTokenList'] = win.DOMTokenList;
global['Node'] = win.Node;
global['Text'] = win.Text;
global['HTMLElement'] = win.HTMLElement;
global['navigator'] = win.navigator;
global['localStorage'] = { getItem: () => {}, setItem: () => {} };
global['MutationObserver'] = getMockMutationObserver();

[minirobotdan]

I'm having a similar issue, mine stops at "transform" but I expect it's just determine by whatever mat element it hits first. I've included noop animations in my serverside app module and regular animations in my browser one, no luck.

Also using material 5.2.4.

[mmalerba]

I am able to prerender our test app which includes a form field without issues

[jcdickman]

Having same issue material 5.2.4 + Universal 5.0.0

`Error: The animation trigger "state" has failed to build due to the following errors:

• The provided animation property "transform" is not a supported CSS property for animations`

[Ejb503]

I had this same issue and resolved by removing

// import { MatMenuModule } from '@angular/material';

my package.json:

"@angular/animations": "^6.0.2",
"@angular/cdk": "^6.1.0",
"@angular/common": "^6.0.2",
"@angular/compiler": "^6.0.2",
"@angular/core": "^6.0.2",
"@angular/flex-layout": "^6.0.0-beta.15",
"@angular/forms": "^6.0.2",
"@angular/http": "^6.0.2",
"@angular/material": "^6.1.0",
"@angular/platform-browser": "^6.0.2",
"@angular/platform-browser-dynamic": "^6.0.2",
"@angular/platform-server": "^6.0.3",
"@angular/router": "^6.0.2",
"@nguniversal/express-engine": "^6.0.0",
"@nguniversal/module-map-ngfactory-loader": "^6.0.0",
"angular2-cookie-law": "^1.4.0",
"core-js": "^2.5.4",
"hammerjs": "^2.0.8",
"ng2-scroll-to": "^1.0.7",
"rxjs": "^6.0.0",
"ts-loader": "^4.3.0",
"zone.js": "^0.8.26"

Issue affects SSR and I can reproduce the bug by reinstalling menu module.

[Supamiu]

I can reproduce too in my Angular 6 project (see commit just above this comment).

I'm using MatMenu in various components so I can't confirm it's coming from it, but what is sure is that I get the same error message:

ERROR Error: 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.AnimationEngine.registerTrigger (webpack:///./node_modules/@angular/animations/fesm5/browser.js?:3779:23)
  at eval (webpack:///./node_modules/@angular/platform-browser/fesm5/animations.js?:163:33)
  at Array.forEach ()
  at AnimationRendererFactory.createRenderer (webpack:///./node_modules/@angular/platform-browser/fesm5/animations.js?:162:27)
  at Object.createComponentView (webpack:///./node_modules/@angular/core/fesm5/core.js?:11451:56)
  at createViewNodes (webpack:///./node_modules/@angular/core/fesm5/core.js?:11492:46)
  at callViewAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:11843:13)
  at execComponentViewsAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:11762:13)
  at createViewNodes (webpack:///./node_modules/@angular/core/fesm5/core.js?:11555:5)
  at createRootView (webpack:///./node_modules/@angular/core/fesm5/core.js?:11441:5)

Dependencies:

    "@angular/animations": "6.0.1",
    "@angular/cdk": "6.0.1",
    "@angular/common": "6.0.1",
    "@angular/compiler": "6.0.1",
    "@angular/core": "6.0.1",
    "@angular/forms": "6.0.1",
    "@angular/http": "6.0.1",
    "@angular/material": "6.0.1",
    "@angular/platform-browser": "6.0.1",
    "@angular/platform-browser-dynamic": "6.0.1",
    "@angular/router": "6.0.1",

[rickysandoval]

Workaround if you're using domino to mock things:

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

with win being the mocked window

[Supamiu]

@rickysandoval Seems like your workaround changes things but didn't fix the issue :

ERROR Error: The animation trigger "transform" has failed to build due to the following errors:

• The provided animation property "box-shadow" is not a supported CSS property for animations
  at InjectableAnimationEngine.AnimationEngine.registerTrigger (webpack:///./node_modules/@angular/animations/fesm5/browser.js?:3779:23)
  at eval (webpack:///./node_modules/@angular/platform-browser/fesm5/animations.js?:163:33)
  at Array.forEach ()
  at AnimationRendererFactory.createRenderer (webpack:///./node_modules/@angular/platform-browser/fesm5/animations.js?:162:27)
  at Object.createComponentView (webpack:///./node_modules/@angular/core/fesm5/core.js?:11451:56)
  at createViewNodes (webpack:///./node_modules/@angular/core/fesm5/core.js?:11492:46)
  at callViewAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:11843:13)
  at execComponentViewsAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:11762:13)
  at createViewNodes (webpack:///./node_modules/@angular/core/fesm5/core.js?:11555:5)
  at createRootView (webpack:///./node_modules/@angular/core/fesm5/core.js?:11441:5)

[rickysandoval]

Do the same thing for box-shadow

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

[Supamiu]

Alright, works for me with domino and property definitions on box-shadow and transform.

[dojchek]

Any update on this one?
I'm getting the same error on IE9 - Works fine on IE10+ and all the other browsers.

[3fuyu]

@dojchek Microsoft has gave up IE, and you?

[mmalerba]

@dojchek Angular Material only supports IE11+, see: https://github.com/angular/material2#browser-and-screen-reader-support

[dojchek]

Thanks guys.
I would gladly gave up on it, but there are browser compatibility requirements on current proj.
I made it work with IE10+ but IE9 is cheeky one.. tried all I could, but couldn't find any decent workaround.
Guess I'll have to settle with IE10+

[josephperrott]

Closing as we still have not be able to reproduce this issue on a supported browser.

[angular-automatic-lock-bot[bot]]

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