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

Found the synthetic property @enterAnimation. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. Angular4

提问by Melchia

When running Karma to test my Angular4 application, I get this error Found the synthetic property @enterAnimation. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.though I already imported the module in app.module.ts

当运行 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,
        ...
      ],

and in my component:

在我的组件中：

 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 serveyet, I got this error with karma.

该应用程序可以完美运行，ng serve但我遇到了 karma 错误。

回答by Stavm

Future readers: you can also get this exact error, when you forget to place

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

animations: [ <yourAnimationMethod()> ]

on your @Componentts file.

在您的@Componentts 文件中。

that is if you're using [@yourAnimationMethod]on the HTML template.

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

回答by Melchia

I found the solution. I just needed to import in app.component.spec.tsthe same import

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

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

回答by bravo tango

For my Angular 6 application, I resolved the issue by adding the following to my component .spec.tsfile:

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

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

Then add the BrowserAnimationsModuleto the imports of the TestBed.configureTestingModulein the same component .spec.tsfile

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

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

回答by Victor Alfonso Pinedo Martinez

For angular 7 and previous version, you only need to add this line in your app.module.tsfile, and remember put it in the imports array modules too in the same file:

对于 angular 7 和以前的版本，你只需要在你的app.module.ts文件中添加这一行，并记住把它放在同一个文件中的导入数组模块中：

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

回答by sai amar

If you see this error during unit testing then you could import utility module like NoopAnimationsModuleinto your spec file which mocks the real animation and donot actually animate

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

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

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

回答by Aditya patil

This should work.

这应该有效。

1- Import BrowserAnimationsModule in app.module.ts

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

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

2 - Add to imports in app.module.ts

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

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

回答by Reuben Mugambi

for my case all i did was add this line to my component (users-component.ts)

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

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

of course ensure you have imported the relevant module in app.component.ts or where you import your modules

当然确保你已经在 app.component.ts 或你导入模块的地方导入了相关的模块

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

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