找到合成属性@enterAnimation.请包括“BrowserAnimationsModule"或“BrowserAnimationsModule"或“NoopAnimationsModule"在您的应用程序中.角4

问题描述

在运行 Karma 以测试我的 Angular4 应用程序时，我收到此错误 找到合成属性 @enterAnimation.请在您的应用程序中包含BrowserAnimationsModule"或NoopAnimationsModule". 尽管我已经在 app.module.ts

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

        // 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 错误.

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

推荐答案

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

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

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

这篇关于找到合成属性@enterAnimation.请包括“BrowserAnimationsModule"或“BrowserAnimationsModule"或“NoopAnimationsModule"在您的应用程序中.角4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！