Synthetic property @enterAnimation found. Please include the "BrowserAnimationsModule" or "NoopAnimationsModule" in the application. Angular4

Question

When I start Karma to test my Angular4 application, I get this error Found the synthetic property @enterAnimation. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application., although I already imported the module into 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 works fine with ng serve, but I got this error with karma.

Answer 1

I have found a solution. I just needed to import into app.component.spec.tsthe same import

 // animation module
        import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
    ...
@NgModule({
    imports: [...
        BrowserAnimationsModule,
        ...
      ],

Answer 2

Future readers: you may also get this exact error when you forget to post

animations: [ <yourAnimationMethod()> ]

@Component ts.

[@yourAnimationMethod] HTML.

Answer 3

Angular 6 , .spec.ts :

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

Then add BrowserAnimationsModuleto import TestBed.configureTestingModulein the same component file .spec.ts

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ LinkedSitesComponent ], imports: [ BrowserAnimationsModule ],
    })
    .compileComponents();
  }));

Answer 4

For angular 7 and the previous version, you just need to add this line to the file app.module.tsand do not forget to add it to the array modules app.module.tsin the same file:

import { BrowserAnimationsModule } from "@angular/platform-browser/animations";