Menu
When running Karma to test my Angular4 application, I get this error Found the synthetic property @enterAnimation. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. though I already imported the module in app.module.ts
// animation module
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
@NgModule({
imports: [...
BrowserAnimationsModule,
...
],
and in my component:
import { Component, OnInit } from '@angular/core';
import {
trigger,
state,
style,
animate,
transition
} from '@angular/animations';
@Component({
selector: 'app-about',
animations: [
trigger(
'enterAnimation', [
transition(':enter', [
style({ transform: 'translateX(100%)', opacity: 0 }),
animate('500ms', style({ transform: 'translateX(0)', opacity: 1 }))
]),
transition(':leave', [
style({ transform: 'translateX(0)', opacity: 1 }),
animate('500ms', style({ transform: 'translateX(100%)', opacity: 0 }))
])
]
),
trigger(
'enterAnimationVetically', [
transition(':enter', [
style({ transform: 'translateY(100%)', opacity: 0 }),
animate('500ms', style({ transform: 'translateY(0)', opacity: 1 }))
]),
transition(':leave', [
style({ transform: 'translateY(0)', opacity: 1 }),
animate('500ms', style({ transform: 'translateY(100%)', opacity: 0 }))
])]
)
],
...
The application runs perfectly with ng serve yet, I got this error with karma.
547
NoopAnimationsModulelinkA null player that must be imported to allow disabling of animations.
BrowserAnimationsModulelinkExports BrowserModule with additional dependency-injection providers for use with animations.
For angular 7 and previous version, you only need to add this line in your app.module.ts file, and remember put it in the imports array modules too in the same file: If you face this error in Storybook, then do import this BrowserAnimationsModule to moduleMetadata in your story.
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.
It seems that all components inside the same module need to have this import in their test files, even if they do not use animations themselves. in my cause it said that browser module was already imported, so I got one level up in my app component and added there the browser animations module and it works.
-1; "angularJS 4" is not a thing, and it's unclear what exactly you're trying to express here since you just provide an error message and a hard-to-read code block without so much as a sentence of explanation.
Future readers: you can also get this exact error, when you forget to place
animations: [ <yourAnimationMethod()> ]
on your @Component ts file.
that is if you're using [@yourAnimationMethod] on the HTML template, i.e. angular animations.
187
I found the solution. I just needed to import in app.component.spec.ts the same import
// animation module
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
@NgModule({
imports: [...
BrowserAnimationsModule,
...
],
For my Angular 6 application, I resolved the issue by adding the following to my component .spec.ts file:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
Then add the BrowserAnimationsModule to the imports of the TestBed.configureTestingModule in the same component .spec.ts file
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ LinkedSitesComponent ], imports: [ BrowserAnimationsModule ],
})
.compileComponents();
}));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
