Ngx-toastr: Found the synthetic property @flyInOut. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.

Created on 16 Nov 2018 · 6Comments · Source: scttcper/ngx-toastr

Included BrowserAnimations correctly and followed all the steps in the Readme file, but still facing the same issue -->

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

@NgModule({
imports: [
        BrowserModule,
        BrowserAnimationsModule]
})

FYI...I have implemented a custom toast component.

_Originally posted by @wsh92 in https://github.com/scttcper/ngx-toastr/issues/136#issuecomment-439276200_

Source

wsh92

Most helpful comment

Have you included the animations to your custom component? Components in Angular cannot inherit animations from other components. Although it still somehow causes the error you've gotten.

Your best bet is to copy the animations from our Toast component and add it to your custom component and customize it, if desired.

yarrgh on 3 Dec 2018

👍4

All 6 comments

@yarrgh @scttcper I am missing anything here?

wsh92 on 16 Nov 2018

Are you creating you're own custom component?

yarrgh on 21 Nov 2018

Are you creating you're own custom component?

Yes, I have created my own custom component. Here is the example I shared #348 to pass data to the custom component.
Also, click events are not working in the custom component. Not sure is it because of this error?

wsh92 on 21 Nov 2018

Have you included the animations to your custom component? Components in Angular cannot inherit animations from other components. Although it still somehow causes the error you've gotten.

Your best bet is to copy the animations from our Toast component and add it to your custom component and customize it, if desired.

yarrgh on 3 Dec 2018

👍4

I have the same issue without creating own component

SUtengda on 12 Jun 2020

👍1

I have the same issue but triggered by Toast_HostBindings when I run the unit tests.
I don't have a custom component and I don't use any animation in my application. I'm using:

Angular 11.2.3
ngx-toastr: 13.2.0

Do I need to include NoopAnimationsModulein the spec of every component that uses the ToastrService? Here is the error log:

Error: Found the synthetic property @flyInOut. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. at checkNoSyntheticProp (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/platform-browser/fesm2015/platform-browser.js:778:1) at DefaultDomRenderer2.setProperty (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/platform-browser/fesm2015/platform-browser.js:760:1) at elementPropertyInternal (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:9970:1) at Module.ɵɵsyntheticHostProperty (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:18709:1) at Toast_HostBindings (http://localhost:9876/_karma_webpack_/webpack:/node_modules/ngx-toastr/fesm2015/ngx-toastr.js:934:39) at processHostBindingOpCodes (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:9182:1) at refreshView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:9460:1) at renderComponentOrTemplate (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:9528:1) at tickRootContext (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:10754:1) at detectChangesInRootView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:10779:1)