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

75

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.

javascript angular typescript testing karma-jasmine Melchia
quelle

Antworten:

100

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.

Stavm
quelle
15
Genau. Dieser Fehler tritt nicht unbedingt auf, da der Import fehlgeschlagen ist BrowserAnimationsModule.
CalvinDale
2
Ich hatte die Animation fälschlicherweise in die zu animierende Komponente importiert. Ich musste die Animation in die Komponente importieren, die den Router-Ausgang enthält. Danke @stavm - es ist ein irreführender Fehler, da ich die Animationsmodule bereits importiert hatte
J King
Sie wählen es genau. Danke @Stavm.
Mohammad Sadiqur Rahman
Danke, ich hatte Animationen beim Klonen einer Komponente vergessen ... :)
Sampgun
72

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,
        ...
      ],
Melchia
quelle
1
Ich versuche dieses Problem zu lösen und diese Lösung funktioniert nicht für mich. Wo platziere ich den @ NgModule-Code in der Datei? gleich nach den Importen?
Hamobi
1
danke für die schnelle antwort .. hast du das zufällig auf eck 6 versucht? Ich hatte gehofft, Ihr Fix würde den Fehler für mich beheben, aber es tut nicht ..
Hamobi
13
Zukünftige Leser können diesen genauen Fehler auch erhalten, wenn Sie vergessen, animations: [ <yourAnimationMethod()> ]auf Ihrer @Component zu platzieren (nur wenn Sie [@yourAnimationMethod]auf der HTML-Vorlage verwenden)
Stavm
2
@Stavm danke, dies hat mein Problem gelöst. Sie sollten es als andere Antwort hinzufügen, um für andere mit demselben Problem besser sichtbar zu sein.
IBRA
1
Vielen Dank sehr hilfreich
L1ghtk3ira
14

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();
  }));
Bravo Tango
quelle
Beim Ausführen des Karma-Testfalls hatte ich ein ähnliches Problem. Und das hat mein Problem behoben. Es war jedoch seltsam, dass meine Komponente weder BrowserAnimationsModule noch dasselbe in ihr übergeordnetes
Element
Hat einen Daumen hoch gegeben, @bravo.
Kushal Jayswal
9

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";
Victor Alfonso Pinedo Martinez
quelle
6

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]
Aditya patil
quelle
3

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';

Sai Amar
quelle
2

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,
        ],
    })
Reuben Mugambi
quelle
1

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!

Säbelprashant
quelle