How to enable Angular animations?

Question

I've done everything by the tutorial ( https://angular.io/guide/animations ), but I have the error: menu-navigation.component.html:1 ERROR Error: Found the synthetic property @slideTop. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. menu-navigation.component.html:1 ERROR Error: Found the synthetic property @slideTop. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.

I read everything about it but did not find the answer on how to resolve it.

Files:

• app.ts: https://gist.github.com/yakimchuk/d2458a26e0a8b9a31f7d92d15885ee08
• parent-component-html: https://gist.github.com/yakimchuk/63ece812957a67a243cc2ab7cb03fd0a
• parent-component-ts: https://gist.github.com/yakimchuk/ea857a109a5c2cc644c16d800990d469
• animated-component.ts: https://gist.github.com/yakimchuk/71c7f3d756742e7e6d98d26f27e889d0
• transitions.ts: https://gist.github.com/yakimchuk/2ef55221aaeaf382d34aee7e77d31d3d

So I did:

• Imported animation modules in the root module (and added them into imports section)
• Described animation of the animated element
• Defined attribute about animation
• Did everything according to documentation

I tried:

• Replace BrowserAnimationsModule with NoopAnimationsModule: no result
• Replace "data: boolean" with "data: any" (in parent component): no result
• Check all NPM-modules versions: they are all 8.0.0 version, no result
• Check tutorial steps many times: no result
• Copy animation metadata from the tutorial and do everything like there, and still: no result

Guys, help me :) I am stuck for already a few days.

UPDATE: Finally, I found the answer after testing on a new empty project

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.

Instead of "" you must move its amination inside that component (app-animated-comp).

Answer 1

BrowserAnimationsModule is an package you need to add in your app.module

https://material.angular.io/guide/getting-started

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class PizzaPartyAppModule { }