Solvedangular Misleading errormessage when using HostBinding with @animation trigger but no defined animations

I'm submitting a ... (check one with "x")

[X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see

Current behavior
When you have a HostBinding attribute in a component which refers to an animation trigger, but you have no defined animations, you get a quite misleading error message: "Found the synthetic property @myAnimationTrigger. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application."

Expected behavior
The error message should be more explicit, ideally something like: "Found defined synthetic property @propertyname but found no corresponding animation definition"

Minimal reproduction of the problem with instructions

  • have a HostBinding("@myAnimationTrigger") property in a component
  • forget to define any animations on the component

After initializing this component (activating the route for it) angular throws an exception:

Error: Found the synthetic property @myAnimationTrigger. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.
at checkNoSyntheticProp (dom_renderer.ts:368) [angular]
at EmulatedEncapsulationDomRenderer2.DefaultDomRenderer2.setProperty (dom_renderer.ts:311) [angular]
at DebugRenderer2.setProperty (services.ts:883) [angular]
at setElementProperty (ng_content.ts:1) [angular]

Here is a plunkr where it happens after switching to PageComponent. I have commented out the animation definition. If you remove the comment, its working without any further changes.

This error message is misleading as the problem is NOT caused by missing BrowserAnimationsModule but instead by the developer who forgot to define the animations.

What is the motivation / use case for changing the behavior?
I invested a good hour after copy/pasting my animations from one component to the other (so I thought) and getting this error on one component but not on the other. It lead me to a completely wrong direction where to search for the error.

  • Angular version: 4.0.0
  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

  • Language: [all | TypeScript X.X | ES6/7 | ES5]

  • Node (for AoT issues): node --version =

12 Answers

✔️Accepted Answer

The error message is not fine. The error message says you're importing BrowserAnimationsModule incorrectly. This put me on track to trying to figure out how I was loading BrowserAnimationsModule incorrectly in my lazy loading modules after one of the few breaking change in Angular 4.x.

The problem had nothing to do with importing BrowserAnimationsModule; I just forgot to include the animations property on my component. Oops. Now I'm here.

Other Answers:

Thanks @johnchristopherjones ! Your comment made me realize I had the same issue. BrowserAnimationsModule was imported correctly, but I simply forgot to use animations in my component.

More Issues: