Trouvé le synthétique de la propriété @enterAnimation. Veuillez inclure “BrowserAnimationsModule” ou “NoopAnimationsModule” dans votre application. Angular4
Lors de l'exécution de Karma pour tester mon Angular4 application, 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.le 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.
OriginalL'auteur Melchia | 2017-08-17
Vous devez vous connecter pour publier un commentaire.
J'ai trouvé la solution. J'ai juste besoin de les importer dans
app.component.spec.ts
la même importeroui juste après les importations
merci pour la réponse rapide.. avez-vous essayé ce angulaire 6 par hasard??? j'espérais que votre correction serait de supprimer le message d'erreur pour moi, mais il ne marche pas..
les futurs lecteurs, vous pouvez également obtenir cette erreur exact où vous oubliez de place
animations: [ <yourAnimationMethod()> ]
sur votre @Composant (uniquement si vous utilisez[@yourAnimationMethod]
sur le modèle HTML)merci, cela a résolu mon problème, vous devez l'ajouter comme une réponse différente à être plus visibles pour les autres avec la même question.
OriginalL'auteur Melchia
Les futurs lecteurs: vous pouvez également obtenir cette erreur exacte, quand vous oubliez de placer
sur votre
@Component
fichier ts.qui est si votre e à l'aide de
[@yourAnimationMethod]
sur le modèle HTML.BrowserAnimationsModule
.Je n'avais pas importé correctement l'animation pour le composant en cours d'animation, j'ai besoin d'importer de l'animation sur le composant qui contient le routeur de sortie. Merci @stavm - c'est une erreur trompeur comme je l'avais déjà importé les Animations modules
OriginalL'auteur Stavm
Pour mon Angulaire 6 application, j'ai résolu le problème en ajoutant ce qui suit à mon composant .spec.ts fichier:
Puis ajouter le
BrowserAnimationsModule
les importations de laTestBed.configureTestingModule
dans le même composant .spec.ts fichierA donné un pouce vers le haut, @bravo.
OriginalL'auteur bravo tango
Angulaire 7 et la version précédente, il vous suffit d'ajouter cette ligne dans votre
app.module.ts
fichier, et n'oubliez pas de le mettre dans les importations de la matrice de modules dans le même fichier:OriginalL'auteur Victor Alfonso Pinedo Martinez