web-dev-qa-db-fra.com

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

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.

 Screenshot of error

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

angular
88
Aravind

Assurez-vous que le package @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
  ],
  ...
})
149
Ploppy

Ce message d'erreur est souvent trompeur. 

Vous pouvez avez oublié d'importer la BrowserAnimationsModule. Mais ce n'était pas mon problème. J'importais BrowserAnimationsModule dans la racine AppModule, comme tout le monde devrait le faire.

Le problème était quelque chose de complètement indépendant du module. J'animais un *ngIf dans le modèle de composant mais j'avais oublié de le mentionner dans le@Component.animationspour la classe de composant.

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

Si vous utilisez une animation dans un modèle, vous également devez la répertorier dans les métadonnées animations du composant ... à chaque fois.

40
Ward

J'ai rencontré des problèmes similaires lorsque j'ai essayé d'utiliser la variable BrowserAnimationsModule. Les étapes suivantes ont résolu mon problème:

  1. Supprimer le node_modules dir
  2. Effacez le cache de votre paquet en utilisant npm cache clean
  3. Exécutez l’une de ces deux commandes listées ici pour mettre à jour vos paquets existants

Si vous rencontrez un 404 erreurs comme

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

ajoutez les entrées suivantes à 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 problème de github .

15
wodzu

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)

4
Howard

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.

3
SamYah

Mon problème était que mon @ angular/platform-browser était sur la version 2.3.1

npm install @angular/platform-browser@latest --save

La mise à niveau vers 4.4.6 a résolu le problème et ajouté le dossier/animations sous node_modules/@ angular/platform-browser

2
Tanel Jõeäär

Après avoir installé un module d'animation, vous créez un fichier d'animation dans votre dossier d'applications.

routeur.animation.ts 

import { animate, state, style, transition, trigger } from '@angular/animations';
    export function routerTransition() {
        return slideToTop();
    }

    export function slideToRight() {
        return trigger('routerTransition', [
            state('void', style({})),
            state('*', style({})),
            transition(':enter', [
                style({ transform: 'translateX(-100%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
            ]),
            transition(':leave', [
                style({ transform: 'translateX(0%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateX(100%)' }))
            ])
        ]);
    }

    export function slideToLeft() {
        return trigger('routerTransition', [
            state('void', style({})),
            state('*', style({})),
            transition(':enter', [
                style({ transform: 'translateX(100%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
            ]),
            transition(':leave', [
                style({ transform: 'translateX(0%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' }))
            ])
        ]);
    }

    export function slideToBottom() {
        return trigger('routerTransition', [
            state('void', style({})),
            state('*', style({})),
            transition(':enter', [
                style({ transform: 'translateY(-100%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateY(0%)' }))
            ]),
            transition(':leave', [
                style({ transform: 'translateY(0%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateY(100%)' }))
            ])
        ]);
    }

    export function slideToTop() {
        return trigger('routerTransition', [
            state('void', style({})),
            state('*', style({})),
            transition(':enter', [
                style({ transform: 'translateY(100%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateY(0%)' }))
            ]),
            transition(':leave', [
                style({ transform: 'translateY(0%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateY(-100%)' }))
            ])
        ]);
    }

Ensuite, vous importez ce fichier d'animation sur votre composant.

Dans votre fichier Component.ts

import { routerTransition } from '../../router.animations';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss'],
  animations: [routerTransition()]
})

N'oubliez pas d'importer une animation dans votre app.module.ts

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

L'animation doit être appliquée sur le composant spécifique.

EX: Utilisation de la directive animation dans un autre composant et fournie dans un autre.

CompA --- @Component ({

animations: [animation]}) CompA --- @Component ({

animations: [animation] <=== cela devrait être fourni dans le composant utilisé})

0
Allu NANDA KISHORE

J'ai eu l'erreur ci-dessous:

Found the synthetic property @collapse. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.

Je suis la réponse acceptée par Ploppy et cela a résolu mon problème.

Voici les étapes:

1.
    import { trigger, state, style, transition, animate } from '@angular/animations';
    Or 
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

2. Define the same in the import array in the root module.

Cela résoudra l'erreur. Bonne codage !!

0
Developer