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.
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.
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();
}));