找到了合成属性@enterAnimation。请在您的应用程序中包含“ BrowserAnimationsModule”或“ NoopAnimationsModule”。角度4

在运行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但我收到了因果报应的错误消息。

未来的读者：当您忘记放置时，也会出现此确切错误

animations: [ <yourAnimationMethod()> ]

在您的@Componentts文件中。

也就是说，如果您使用[@yourAnimationMethod]的是HTML模板。

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

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

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

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

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

这应该工作。

1-在app.module.ts中导入BrowserAnimationsModule

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

2-添加到app.module.ts中的导入

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

如果在单元测试期间看到此错误，则可以将实用程序模块导入NoopAnimationsModule到您的spec文件中，该文件模拟真实的动画，并且实际上不进行动画处理

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

就我而言，我所做的就是将此行添加到我的组件（users-component.ts）

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

当然，请确保已在app.component.ts中导入了相关模块，或者在模块导入位置

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

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

如果你面对的这个错误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，上面提到的答案很有效！