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

Question

Lors de l'exécution Karma pour tester mon application Angular4, je reçois cette erreur Found the synthetic property @enterAnimation. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. si je l'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 encore, j'ai eu cette erreur avec le karma.

Answer 1

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

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