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

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.

Answers:

Answer

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.

Answer

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

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

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

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

Answer

This should work.

1- Import BrowserAnimationsModule in app.module.ts

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

2 - Add to imports in app.module.ts

imports: [
BrowserModule,
FormsModule,
HttpModule,
routing,
Ng2SmartTableModule,
TreeModule,
BrowserAnimationsModule]
Answer

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

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, answers that are mentioned above works well!

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.