title: How to enable Angular animations?
body: <p>I've done everything by the tutorial (<a href="https://angular.io/guide/animations" rel="nofollow noreferrer">https://angular.io/guide/animations</a>), but I have the error: <code>menu-navigation.component.html:1 ERROR Error: Found the synthetic property @slideTop. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.</code> </p>
  
  <p>I read everything about it but did not find the answer on how to resolve it.</p>
  
  <p>Files:</p>
  
  <ul>
  <li>app.ts: <a href="https://gist.github.com/yakimchuk/d2458a26e0a8b9a31f7d92d15885ee08" rel="nofollow noreferrer">https://gist.github.com/yakimchuk/d2458a26e0a8b9a31f7d92d15885ee08</a></li>
  <li>parent-component-html: <a href="https://gist.github.com/yakimchuk/63ece812957a67a243cc2ab7cb03fd0a" rel="nofollow noreferrer">https://gist.github.com/yakimchuk/63ece812957a67a243cc2ab7cb03fd0a</a></li>
  <li>parent-component-ts: <a href="https://gist.github.com/yakimchuk/ea857a109a5c2cc644c16d800990d469" rel="nofollow noreferrer">https://gist.github.com/yakimchuk/ea857a109a5c2cc644c16d800990d469</a></li>
  <li>animated-component.ts: <a href="https://gist.github.com/yakimchuk/71c7f3d756742e7e6d98d26f27e889d0" rel="nofollow noreferrer">https://gist.github.com/yakimchuk/71c7f3d756742e7e6d98d26f27e889d0</a></li>
  <li>transitions.ts: <a href="https://gist.github.com/yakimchuk/2ef55221aaeaf382d34aee7e77d31d3d" rel="nofollow noreferrer">https://gist.github.com/yakimchuk/2ef55221aaeaf382d34aee7e77d31d3d</a></li>
  </ul>
  
  <p>So I did:</p>
  
  <ul>
  <li>Imported animation modules in the root module (and added them into imports section)</li>
  <li>Described animation of the animated element</li>
  <li>Defined attribute about animation</li>
  <li>Did everything according to documentation</li>
  </ul>
  
  <p>I tried:</p>
  
  <ul>
  <li>Replace BrowserAnimationsModule with NoopAnimationsModule: no result</li>
  <li>Replace "data: boolean" with "data: any" (in parent component): no result</li>
  <li>Check all NPM-modules versions: they are all 8.0.0 version, no result</li>
  <li>Check tutorial steps many times: no result</li>
  <li>Copy animation metadata from the tutorial and do everything like there, and still: no result</li>
  </ul>
  
  <p>Guys, help me :)
  I am stuck for already a few days.</p>
  
  <p><strong>UPDATE:</strong>
  <strong>Finally, I found the answer after testing on a new empty project</strong></p>
  
  <p>If you defined "animations" to the component (prop), then you can use them only inside its component (its own html), but not within a parent layout.</p>
  
  <p>Instead of "" you must move its amination inside that component (app-animated-comp).</p>