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

Question

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

在我的 组件 中：

  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 完美运行，但是，我得到了这个与业力有关的错误。

原文由 Melchia 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 Melchia 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果包含 BrowserAnimationsModule 但仍然无法正常工作，则必须像这样将 animations 属性添加到您的@component

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

原文由 Mouad Chaouki 发布，翻译遵循 CC BY-SA 4.0 许可协议