Angular 7 animation trigger causes console error

Question

I am trying to set up a fadeInOut animation on a component. My app module imports BrowserAnimationsModule.

I created an animation and a trigger in a separate file:

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))
]);

Then, I created a component and verified that the component itself works:

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;
  }
}

Note that I am storing the state of whether this alert should appear in a globals.ts file, although that's unrelated:

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

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

So I use the component inside another component's html like so:

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

This works, the alert is dismissed when you click the close button, everything works as expected. However, when I try to add my trigger to it

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

I get a console error Error: Found the synthetic property @fadeInOut. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.

I've Googled this, but AFAICT I've covered all the gotchas in most of the replies: I've included the animations declaration in the component, etc.

What did I miss?

Vadi · Accepted Answer · 2019-06-08T19:28:13.433

0

As stated in official docs, animation should be added to component's metadata property. There's such property in GlobalAlertComponent here:

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

This allows to use animation on any element inside of html part of this component. But @fadeInOut animation has been used in another component's html here:

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

Make sure this component has import and animation property in its metadata.

edited Jun 08 '19 at 19:28

answered Jun 08 '19 at 19:22

Vadi

3,279
2
13
30

This fixed the error, although the actual animation is not working yet. I think it's because my ngIf is inside the component's template and not on the component itself. – Steve Jun 08 '19 at 23:12
Yes, that was it. I moved everything into the global alert component, including the trigger. Works now. Thanks @vadi – Steve Jun 09 '19 at 00:01

score -1 · Answer 2 · answered Jun 08 '19 at 18:11

-1

I get a console error Error: Found the synthetic property @fadeInOut. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.

This error occurs when you have not imported "BrowserAnimationsModule" or "NoopAnimationsModule" module in your component containing Module. If your animation component is in App module then check if app.module is having the following in the @NgModule -

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

answered Jun 08 '19 at 18:11

user2216584

5,387
3
22
29

Just want to confirm if your GlobalAlertComponent is part of AppModule, not another feature module? If it is part of the feature module then respective feature module must have BrowserAnimationsModule imported. – user2216584 Jun 08 '19 at 18:26
`GlobalAlertComponent` is part of `SharedModule`. If I try to import `BrowserAnimationsModule` into `SharedModule` I get a different error `Error: Uncaught (in promise): Error: BrowserModule has already been loaded.`. If I try **removing** it from AppModule, I still get the error. – Steve Jun 08 '19 at 18:39
Please try reexport BroswerAnimationModule in shared module i.e. exports: BrowserAnimationModule and remove reference from App module. – user2216584 Jun 08 '19 at 19:14
See accepted answer: it turns out had nothing to do with the module. I think angular should throw a more helpful error here. – Steve Jun 09 '19 at 00:02

score -2 · Answer 3 · answered Jun 08 '19 at 18:12

-2

You need to add BrowserAnimationsModule In app-module.ts file in import section.

import: [
BrowserAnimationsModule
]

Hope it will help. Happy coding :)

answered Jun 08 '19 at 18:12

AlokeT

1,086
7
21

Angular 7 animation trigger causes console error

3 Answers3