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

Question

J'ai mis à jour un projet Angular 4 en utilisant angular-seed et reçois maintenant l'erreur

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

Comment puis-je réparer cela? Qu'est-ce que le message d'erreur me dit exactement?

Answer 1

Assurez-vous que le paquet @angular/animations est installé (par exemple en exécutant npm install @angular/animations ). Ensuite, dans votre app.module.ts

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

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

Answer 2

Cette message d'erreur est souvent trompeuse.

Vous avez peut - être oublié d'importation de l' BrowserAnimationsModule. Mais ce n'était pas mon problème. J'ai été importation BrowserAnimationsModule à la racine AppModule, tout le monde devrait le faire.

Le problème était quelque chose de complètement sans rapport avec le module. J'ai été l'animation de l'*ngIf dans le modèle de composant, mais j'avais oublié de le mentionner dans l' @Component.animations pour la classe du composant.

@Component({
  selector: '...',
  templateUrl: './...',
  animations: [myNgIfAnimation] // <-- Don't forget!
})

Si vous utilisez une animation dans un modèle, vous devez dresser la liste que l'animation dans le composant de l' animations de métadonnées ... à chaque fois.

Answer 3

J'ai couru dans des problèmes similaires, lorsque j'ai essayé d'utiliser l' BrowserAnimationsModule. Étapes suivantes résolu mon problème:

1. Supprimer la node_modules dir
2. Videz votre cache des paquets à l'aide de npm cache clean
3. Exécutez l'une de ces deux commandes listées ici pour mettre à jour vos paquets existants

Si vous rencontrez des erreurs 404 comme

http://.../node_modules/@angular/platform-browser/bundles/platform-browser.umd.js/animations

ajouter les entrées suivantes à l' map dans votre system.config.js:

'@angular/animations': 'node_modules/@angular/animations/bundles/animations.umd.min.js',
'@angular/animations/browser':'node_modules/@angular/animations/bundles/animations-browser.umd.js',
'@angular/platform-browser/animations': 'node_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.js'

naveedahmed1 a fourni la solution sur ce github question.

Answer 4

Pour moi, j'ai manqué cette déclaration dans @Component Decorator: animations: [yourAnimation]

Une fois que j'ai ajouté cette déclaration, les erreurs ont disparu. (Angulaire 6.x)

Answer 5

Tout ce que je devais faire était d'installer ce

 npm install @angular/animations@latest --save  
 

puis importer

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

dans votre fichier app.module.ts .