Javascript 找到了合成属性@enterAnimation。请包括以下任何一项：；BrowserAnimationsModule“；或；NoopAnimationsModule“；在您的应用程序中。角4

当运行Karma来测试Angular4应用程序时，我发现这个错误

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

尽管我已经在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中遇到了这个错误。

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

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

---

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

animations: [ <yourAnimationMethod()> ]

动画：[]

在

@组件

ts文件上

---

也就是说，如果您在HTML模板上使用

[@yourAnimationMethod]

。

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

然后将

BrowserAnimationsModule

添加到同一component.spec.ts文件中

TestBed.configureTestingModule

的导入中

---

对于angular 7和以前的版本，您只需在

app.module.ts

文件中添加此行，并记住将其也放在同一文件中的imports array module中：

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

---

如果在单元测试期间看到此错误，则可以将实用程序模块（如

NoopAnimationsModule

）导入spec文件，该文件模拟真实动画，而不实际制作动画

---

从“@angular/platform browser/animations”导入{NoopAnimationsModule}
对于我的案例，我所做的只是将这一行添加到我的组件（users component.ts）

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

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

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

如果您在
故事书
中遇到此错误，请将此
浏览动画模块
导入故事中的
模块元数据。

像这样,

从'@angular/platform browser/animations'导入{BrowserAnimationsModule}；
导出常量主=（）=>({
模板：`
`,
moduleMetadata：{
导入：[AppModule，BrowserAnimationsModule]，
},
道具：{
数据：一些数据是常数，
},
});

PS：对于Angular，上面提到的答案很有效。
如果包含
浏览动画模块
，但仍然不起作用，您必须像这样向@component添加
动画
属性


@组件({
选择器：'应用程序订单'，
templateUrl:“./orders.component.html”，
样式URL:['./orders.component.scss']，
动画：[
触发器（'detailExpand'[
状态（'折叠'），样式({
高度：“0px”，
最小高度：“0”
})),
状态（'扩展'），样式({
高度：'*'
})),
过渡（“展开折叠”，动画（“225ms立方-贝塞尔（0.4,0.0,0.2,1）”，
]),
],
})
我正在尝试解决这个问题，但这个解决方案对我不起作用。我应该将@NgModule代码放在文件中的什么位置？就在进口之后？谢谢你的快速回复。。你是不是碰巧在angular 6上试过这个？我希望你的修复程序能帮我清除错误，但事实并非如此。未来的读者，当你忘记在@Component上放置
动画时，你也可以得到这个准确的错误：[]
（只有在HTML模板上使用
[@yourAnimationMethod]
）@Stavm谢谢，这解决了我的问题，你应该把它作为一个不同的答案添加进来，以使其他有相同问题的人更容易看到。非常感谢你的帮助。由于导入
BrowserAnimationsModule
失败，不一定会出现此错误。我错误地将动画导入到正在设置动画的组件中，我需要导入包含路由器出口的组件上的动画。谢谢@stavm-这是一个误导性的错误，因为我已经导入了动画模块。您可以准确地选择它。谢谢@Stavm。谢谢，我在克隆组件时忘记了动画…：）在运行Karma测试用例时，我遇到了类似的问题。这解决了我的问题。然而，奇怪的是，我的组件没有导入BrowserAnimationsModule，也没有导入到其父组件：）竖起大拇指，@bravo。
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";

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

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

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