找到合成属性@enterAnimation.请在您的应用程序中包含"BrowserAnimationsModule"或"NoopAnimationsModule".Angular4

Question

当运行Karma来测试我的Angular4应用程序时,Found the synthetic property @enterAnimation. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.虽然我已经在app.module.ts中导入了模块但是我收到了这个错误

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

在我的组件中:

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

该应用程序运行完美ng serve但我得到了业力的这个错误.

Answer 1

未来的读者:当你忘记放置时,你也可以得到这个确切的错误

animations: [ <yourAnimationMethod()> ]

在你的@Componentts文件上.

那就是你[@yourAnimationMethod]在HTML模板上使用.

Answer 2

我找到了解决方案.我只需要导入app.component.spec.ts相同的导入

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

Answer 3

对于我的Angular 6应用程序，我通过将以下内容添加到我的组件.spec.ts文件中解决了该问题：

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

然后将。添加BrowserAnimationsModule到TestBed.configureTestingModule同一组件.spec.ts文件中的导入中。

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

Answer 4

对于angular 7和以前的版本，您只需要在app.module.ts文件中添加此行，并记住将其也放在导入数组模块的同一文件中：

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

Answer 5

如果您在单元测试期间看到此错误，那么您可以将实用程序模块导入NoopAnimationsModule您的规范文件中，该文件会模拟真实的动画，但实际上不会产生动画

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

Answer 6

如果您在 中遇到此错误Storybook，请务必将其导入BrowserAnimationsModule到moduleMetadata您的故事中。
像这样，

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：对于Angular，上面提到的答案效果很好。