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

【问题标题】：Found the synthetic property @enterAnimation. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. Angular4找到合成属性@enterAnimation。请在您的应用程序中包含“BrowserAnimationsModule”或“NoopAnimationsModule”。角4
【发布时间】：2017-08-17 08:59:52
【问题描述】：

在运行 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 下完美运行，但我收到了这个 karma 错误。

【问题讨论】：

标签： javascript angular typescript testing karma-jasmine

【解决方案1】：

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

animations: [ <yourAnimationMethod()> ]

在您的 @Component ts 文件中。

如果您在 HTML 模板上使用[@yourAnimationMethod]，即angular animations。

【讨论】：

没错。这个错误不一定会因为导入BrowserAnimationsModule失败而浮出水面。
我错误地将动画导入到正在制作动画的组件中，我需要在包含路由器插座的组件上导入动画。谢谢@stavm - 这是一个误导性错误，因为我已经导入了动画模块
你选择它。谢谢@Stavm。
感谢我在克隆组件时忘记了动画... :)

【解决方案2】：

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

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

【讨论】：

我正在尝试解决这个问题，但这个解决方案对我不起作用。我在哪里将@NgModule 代码放在文件中？导入之后？
未来的读者，当您忘记将animations: [ <yourAnimationMethod()> ] 放置在您的@Component 上（仅当您在HTML 模板上使用[@yourAnimationMethod]）时，您也会得到这个确切的错误
@Stavm 谢谢，这解决了我的问题，您应该将其添加为不同的答案，以便其他有相同问题的人更容易看到。
导入BrowserAnimationsModule 到my-component.spec.ts 后仍然会出现错误。我最终通过在我的其他组件的每个测试文件中导入BrowserAnimationsModule 来修复它。似乎同一模块内的所有组件都需要在其测试文件中具有此导入，即使它们本身不使用动画。
在我的原因中它说浏览器模块已经导入，所以我在我的应用程序组件中升级了一级并在那里添加了浏览器动画模块并且它可以工作。

【解决方案3】：

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

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

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

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

【讨论】：

我在运行 Karma 测试用例时遇到了类似的问题。这解决了我的问题。然而，奇怪的是我的组件没有导入 BrowserAnimationsModule，也没有导入到它的父组件:)
竖起大拇指，@bravo。

【解决方案4】：

对于 Angular 7 和之前的版本，您只需在 app.module.ts 文件中添加这一行，并记住将其放在同一文件中的 imports 数组模块中：

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

【讨论】：

【解决方案5】：

如果您在 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，上面提到的答案都很好。

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

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

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

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

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

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

【讨论】：

【解决方案8】：

如果包含 BrowserAnimationsModule 但仍然无法正常工作，则必须像这样将 animations 属性添加到您的 @component

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

【讨论】：