Анимация Angular 7 вызывает ошибку консоли

Question

Я пытаюсь настроить анимацию fadeInOut для компонента. Мой модуль приложения импортирует BrowserAnimationsModule.

Я создал анимацию и триггер в отдельном файле:

import { animate, style, animation, trigger, useAnimation, transition } from '@angular/animations';

export const fadeIn = animation([style({ opacity: 0 }), animate('500ms', style({ opacity: 1 }))]);
export const fadeOut = animation(animate('500ms', style({ opacity: 0 })));

export const fadeInOut = trigger('fadeInOut', [
  transition('void => *', useAnimation(fadeIn)),
  transition('* => void', useAnimation(fadeOut))
]);

Затем я создал компонент и проверил, что компонентсамо по себе работает:

import { Component, OnInit } from '@angular/core';
import { Globals } from '@app/globals';
import { fadeInOut } from '@app/animations';

@Component({
  selector: 'app-global-alert',
  template: `
    <div class="global-alert" *ngIf="globalAlert">
      <div class="global-alert-message"><ng-content></ng-content></div>
      <div class="close" (click)="closeGlobalAlert()"></div>
    </div>
  `,
  styles: [],
  animations: [fadeInOut]
})
export class GlobalAlertComponent implements OnInit {
  private globalAlert: boolean;

  constructor(private globals: Globals) {
    this.globalAlert = globals.hasGlobalAlert;
  }

  ngOnInit() {}

  closeGlobalAlert() {
    this.globals.hasGlobalAlert = false;
    this.globalAlert = false;
  }
}

Обратите внимание, что я сохраняю информацию о том, должно ли это предупреждение появляться в файле globals.ts, хотя это не имеет отношения:

import { Injectable } from '@angular/core';

@Injectable()
export class Globals {
  hasGlobalAlert = true;
}

Поэтому я использую компонентвнутри html другого компонента, например, так:

<div>
lots of html
</div>
   <app-global-alert>Hello world</app-global-alert>

Это работает, предупреждение отключается при нажатии кнопки закрытия, все работает как положено.Тем не менее, когда я пытаюсь добавить к нему свой триггер

   <app-global-alert [@fadeInOut]>Hello world</app-global-alert>

Я получаю ошибку консоли Error: Found the synthetic property @fadeInOut. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.

Я гуглил это, но AFAICT Я покрыл все ошибки вбольшинство ответов: я включил в компонент объявление animations и т. д.

Что я пропустил?

Answer 1

Вам нужно добавить BrowserAnimationsModule В файле app-module.ts в разделе импорта.

import: [
BrowserAnimationsModule
]

Надеюсь, это поможет. Удачного кодирования:)

Answer 2

Как указано в официальных документах , анимация должна быть добавлена ​​к свойству метаданных компонента.Такое свойство есть в GlobalAlertComponent здесь:

@Component({
  animations: [fadeInOut],
  ...
})
export class GlobalAlertComponent implements OnInit {
...

Это позволяет использовать анимацию для любого элемента внутри html части этого компонента.Но @fadeInOut анимация была использована в другом компоненте html здесь:

<div>
  lots of html
</div>
  <app-global-alert [@fadeInOut]>Hello world</app-global-alert>

Убедитесь, что этот компонент имеет свойство импорта и анимации в своих метаданных.

Answer 3

Я получаю консольную ошибку Ошибка: Found the synthetic property @fadeInOut. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.

Эта ошибка возникает, если вы не импортировали модуль "BrowserAnimationsModule" or "NoopAnimationsModule" в свой компонент, содержащий Модуль.Если ваш компонент анимации находится в модуле приложения, проверьте, имеет ли app.module следующее в @NgModule -

@NgModule({  
  imports: [
    BrowserModule,
    BrowserAnimationsModule //or NoopAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }