javascript - 找到合成属性@enterAnimation。请在您的申请中包含 "BrowserAnimationsModule"或 "NoopAnimationsModule"。 Angular 4

Question

当运行 Karma 来测试我的 Angular4 应用程序时，我收到此错误 Found the synthetic property @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 错误。

Answer 1

future 的读者:当你忘记放置时，你也会得到这个确切的错误

animations: [ <yourAnimationMethod()> ]

在你的 @Component ts 文件上。

也就是说，如果您在 HTML 模板上使用 [@yourAnimationMethod]，即 angular animations .