Как включить угловую анимацию?

Question

Я сделал все по учебнику (https://angular.io/guide/animations),, но у меня есть ошибка: menu-navigation.component.html:1 ERROR Error: Found the synthetic property @slideTop. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.

Я прочитал все об этом, но не нашел ответа о том, как решить.

Файлы:

• 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

Так я и сделал:

• Импортированные модули анимации в корневой модуль (и добавление их в раздел импорта)
• Описанная анимация анимированного элемента
• Определенный атрибут об анимации
• сделал все по документации

Я пытался:

• Заменить модуль BrowserAnimationsModule на NoopAnimationsModule: безрезультатно
• Заменить «data: boolean» на «data: any» (в родительском компоненте): нет результата
• Проверьте все версии NPM-модулей: все они версии 8.0.0, безрезультатно
• Много раз проверять шаги учебника: нет результата
• Скопируйте метаданные анимации из учебника и делайте все как есть, и все же: безрезультатно

Ребята, помогите мне :) Я застрял на несколько дней.

UPDATE: Наконец-то я нашел ответ после тестирования нового пустого проекта

Если вы определили «анимации» для компонента (prop), то вы можете использовать их только внутри его компонента (его собственный html), но не внутри родительского макета.

Вместо "" вы должны переместить его аминирование внутри этого компонента (app-animated-comp).

Answer 1

BrowserAnimationsModule - это пакет, который необходимо добавить в ваш app.module

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

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

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