120

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.

8 Answers 8

144

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.

4
  • 20
    Exactly. This error is not necessarily surfaced because of failure to import BrowserAnimationsModule.
    – CalvinDale
    Oct 26, 2018 at 16:45
  • 4
    I had incorrectly imported the animation to the component being animated, I needed to import the animation on the component that holds the router outlet. Thanks @stavm - it is a misleading error as I had already imported the Animations modules
    – J King
    Jan 17, 2019 at 16:44
  • you pick it exactly. Thanks @Stavm. Dec 8, 2019 at 4:08
  • Thanks I had forgot animations while cloning a component... :)
    – Sampgun
    Sep 23, 2020 at 14:30
111

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,
        ...
      ],
9
  • 3
    i'm trying to solve this problem and this solution isnt working for me. Where do I place the @NgModule code in the file? right after the imports?
    – hamobi
    Jun 12, 2018 at 23:15
  • 15
    future readers you can also get this exact error when you forget to place animations: [ <yourAnimationMethod()> ] on your @Component (only if youre using [@yourAnimationMethod] on the HTML template)
    – Stavm
    Jul 15, 2018 at 12:34
  • 2
    @Stavm thanks, this solved my issue, you should add it as a different answer to be more visible for others with the same issue.
    – IBRA
    Oct 22, 2018 at 12:36
  • 2
    After importing BrowserAnimationsModule to my-component.spec.ts the error would still appear. I finally fixed it by importing BrowserAnimationsModule in every single test file of my other components as well. 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. Jan 29, 2020 at 15:00
  • 2
    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. Oct 4, 2021 at 16:12
28

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();
  }));
2
  • 1
    I was facing a similar kind of issue while running Karma test case. And this fixed my issue. However, it was strange that my component didn't import BrowserAnimationsModule, nor the same imported to its parent :) May 8, 2019 at 14:45
  • Gave a thumb up, @bravo. May 8, 2019 at 14:46
14

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:

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

If you face this error in Storybook, then do import this BrowserAnimationsModule to moduleMetadata in your story.
Like this,

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


export const Primary = () => ({
  template: `
   <div style="width: 720px">
    <view-list [data]="data"></view-list>
   </div>
   `,
  moduleMetadata: {
    imports: [AppModule, BrowserAnimationsModule],
  },
  props: {
    data: SOME_DATA_CONSTANT,
  },
});

PS: For Angular, the answers that are mentioned above works well.

6

If you see this error during unit testing then you could import utility module like NoopAnimationsModule into your spec file which mocks the real animation and donot actually animate

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

1
  • This should be the top and accepted answer, adding BrowserAnimationsModule actually worsens further by adding more failures to the test spec file. For unit testing purpose, NoopAnimationsModule should be used. Sep 30, 2022 at 15:58
4

if included BrowserAnimationsModule but still not working, you will have to add animations attribute to your @component like this

@Component({
  selector: 'app-orders',
  templateUrl: './orders.component.html',
  styleUrls: ['./orders.component.scss'],
  animations: [
    trigger('detailExpand', [
      state('collapsed', style({
        height: '0px',
        minHeight: '0'
      })),
      state('expanded', style({
        height: '*'
      })),
      transition('expanded <=> collapsed', animate('225ms cubic-   bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
})

2

for my case all i did was add this line to my component (users-component.ts)

@Component({
animations: [appModuleAnimation()],
})

of course ensure you have imported the relevant module in app.component.ts or where you import your modules

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

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.