web-dev-qa-db-fra.com

Trouvé la propriété synthétique @enterAnimation. Veuillez inclure "BrowserAnimationsModule" ou "NoopAnimationsModule" dans votre application. Angulaire4

Lors de l'exécution de Karma pour tester mon application Angular4, j'obtiens cette erreur Found the synthetic property @enterAnimation. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. si j’ai déjà importé le module dans app.module.ts

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

et dans mon composant:

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

L'application fonctionne parfaitement avec ng serve pourtant, j'ai eu cette erreur avec le karma.

javascriptangulartypescripttestingkarma-jasmine
34
Melchia

J'ai trouvé la solution. Je voulais juste importer dans app.component.spec.ts la même importation

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

Futurs lecteurs: vous pouvez aussi avoir cette erreur quand vous oubliez de placer

animations: [ <yourAnimationMethod()> ]

sur ton @Component ts fichier.

c'est-à-dire si vous utilisez [@yourAnimationMethod] sur le modèle HTML.

43
Stavm

Pour mon application Angular 6, j'ai résolu le problème en ajoutant ce qui suit à mon fichier . Spec.ts:

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

Ajoutez ensuite le BrowserAnimationsModule aux importations du TestBed.configureTestingModule dans le même composant . spec.ts fichier

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

Pour angular 7 et la version précédente, il vous suffit d'ajouter cette ligne dans votre app.module.ts fichier, et rappelez-vous de le mettre dans les modules de tableau d'importation dans le même fichier:

import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
6
Victor Alfonso Pinedo Martinez