Found the synthetic property @enterAnimation. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. Angular4

Question

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.

score 144 · Answer 1 · edited Nov 14 '21 at 20:31

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.

edited Nov 14 '21 at 20:31

Nate Anderson

18,334
18
100
135

answered Oct 22 '18 at 13:28

Stavm

7,833
5
44
68

20

Exactly. This error is not necessarily surfaced because of failure to import `BrowserAnimationsModule`. – CalvinDale Oct 26 '18 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 '19 at 16:44
you pick it exactly. Thanks @Stavm. – Mohammad Sadiqur Rahman Dec 08 '19 at 04:08
Thanks I had forgot animations while cloning a component... :) – Sampgun Sep 23 '20 at 14:30

score 111 · Accepted Answer · edited Aug 20 '17 at 11:07

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,
        ...
      ],

edited Aug 20 '17 at 11:07

halfer

19,824
17
99
186

answered Aug 17 '17 at 14:37

Melchia

22,578
22
103
117

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 '18 at 23:15
1

thanks for the quick reply.. have you tried this on angular 6 by chance? i was hoping your fix would clear the error for me but it doesnt.. – hamobi Jun 13 '18 at 00:13
15

future readers you can also get this exact error when you forget to place `animations: [ ]` on your @Component (only if youre using `[@yourAnimationMethod]` on the HTML template) – Stavm Jul 15 '18 at 12:34
@Stavm you are the boss! The animation has to be registered with the meta data of the component which can be easy to overlook, especially when using external animation files. Angular could do with a specific error in this circumstance as it is the last place I was looking to find the answer. – user1059939 Jul 19 '18 at 15:47
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 '18 at 12:36
1

Thanks very helpful – L1ghtk3ira Mar 01 '19 at 14:39
I don't think this is the right answer. The right answer is below reported by bravotango – Mr Chow Jul 13 '19 at 20:40
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. – Artur Noetzel Jan 29 '20 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. – Ruslan López Oct 04 '21 at 16:12

score 28 · Answer 3 · edited Nov 10 '18 at 00:25

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

edited Nov 10 '18 at 00:25

Unheilig

16,196
193
68
98

answered Nov 10 '18 at 00:07

bravo tango

304
4
5

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 :) – Kushal Jayswal May 08 '19 at 14:45
Gave a thumb up, @bravo. – Kushal Jayswal May 08 '19 at 14:46

score 14 · Answer 4 · edited Feb 27 '19 at 05:38

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";

edited Feb 27 '19 at 05:38

Des Horsley

1,858
20
43

answered Jan 14 '19 at 14:53

Victor Pinedo

141
1
4

saberprashant · Answer 5 · 2021-05-22T11:41:11.537

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.

score 6 · Answer 6 · answered Nov 05 '19 at 19:42

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';

answered Nov 05 '19 at 19:42

sai amar

1,758
1
10
9

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. – Sundar Rajan Sep 30 '22 at 15:58

score 4 · Answer 7 · answered Apr 18 '21 at 01:08

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)')),
    ]),
  ],
})

score 2 · Answer 8 · answered Mar 20 '20 at 11:30

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,
        ],
    })

Found the synthetic property @enterAnimation. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. Angular4

8 Answers8

Linked