javascript - Found the synthetic property @enterAnimation. Please include either "BrowserAnimationsModule" or

admin管理员组

文章数量:1133647

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.

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.

• javascript
• angular
• typescript
• testing
• karma-jasmine

Share Improve this question Follow edited Nov 27, 2017 at 11:11 Melchia asked Aug 17, 2017 at 8:59 MelchiaMelchia 24.2k2323 gold badges108108 silver badges127127 bronze badges

Add a comment  | 

8 Answers 8

Sorted by: Reset to default 148

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

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

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.

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

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

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

本文标签：