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

当运行 Karma 来测试 Angular4应用程序时，我得到了这个错误 Found the synthetic property @enterAnimation. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.，尽管我已经在 应用程序模块中导入了模块

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

The application runs perfectly with ng serve yet, I got this error with karma.

108313 次浏览
小开
最佳答案

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

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

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

animations: [ <yourAnimationMethod()> ]

在你的 @Component文件上。

也就是说，如果在 HTML 模板上使用 [@yourAnimationMethod]，即 有角度的动画。

小开

对于我的 Angular 6应用程序，我通过在组件 。规格文件中添加以下内容解决了这个问题:

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

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

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

对于 angle 7和之前的版本，您只需要在 app.module.ts文件中添加这一行，并记住将它也放在导入数组模块中的同一个文件中:

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

如果您在单元测试期间看到这个错误，那么您可以导入实用工具模块，如 NoopAnimationsModule到您的规格文件，模拟真正的动画，而不是实际动画

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

If you face this error in Storybook, then do import this BrowserAnimationsModule to moduleMetadata in your story.
像这样,

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，上面提到的答案很有效。

小开

如果包含 BrowserAnimationsModule但仍然不能工作，您必须像这样将 animations属性添加到您的@组件中

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


提交答案