Gefunden die synthetische Eigenschaft @enterAnimation. Bitte fügen Sie Ihrer Anwendung entweder "BrowserAnimationsModule" oder "NoopAnimationsModule" hinzu. Angular4

Beim Ausführen von Karma zum Testen meiner Angular4-Anwendung wird dieser Fehler angezeigt, Found the synthetic property @enterAnimation. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.obwohl ich das Modul bereits in app.module.ts importiert habe

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

und in meiner Komponente :

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

Die Anwendung läuft noch perfekt mit ng serve, ich habe diesen Fehler mit Karma bekommen.

Zukünftige Leser: Sie können genau diesen Fehler auch erhalten, wenn Sie vergessen, zu platzieren

animations: [ <yourAnimationMethod()> ]

auf Ihrer @Componentts-Datei.

Dies ist [@yourAnimationMethod]der Fall , wenn Sie die HTML-Vorlage verwenden.

Ich habe die Lösung gefunden. Ich musste nur im app.component.spec.tsselben Import importieren

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

Für meine Angular 6-Anwendung habe ich das Problem behoben, indem ich meiner Komponentendatei .spec.ts Folgendes hinzugefügt habe :

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

Fügen Sie dann die BrowserAnimationsModulezu den Importen der TestBed.configureTestingModulein derselben Komponente .spec.ts- Datei hinzu

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

Für Angular 7 und frühere Versionen müssen Sie diese Zeile nur in Ihre app.module.tsDatei einfügen. Denken Sie daran, sie auch in die Import-Array-Module in derselben Datei einzufügen:

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

Das sollte funktionieren.

1- Importieren Sie BrowserAnimationsModule in app.module.ts

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

2 - Zu den Importen in app.module.ts hinzufügen

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

Wenn Sie diesen Fehler während NoopAnimationsModuledes Komponententests sehen, können Sie ein Dienstprogrammmodul wie in Ihre Spezifikationsdatei importieren, das die eigentliche Animation verspottet und nicht wirklich animiert

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

Für meinen Fall habe ich diese Zeile nur zu meiner Komponente hinzugefügt (users-component.ts).

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

Stellen Sie natürlich sicher, dass Sie das entsprechende Modul in app.component.ts importiert haben oder wo Sie Ihre Module importieren

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

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

Wenn Sie diesen Fehler in Gesicht Storybook, dann importiere dies BrowserAnimationsModulezu moduleMetadatain Ihrer Geschichte.
So was,

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: Für Angular funktionieren die oben genannten Antworten gut!