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

J'ai mis à niveau un projet Angular 4 en utilisant angular-seed et j'obtiens maintenant l'erreur

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

Comment puis-je réparer cela? Que me dit exactement le message d'erreur?

Assurez-vous que le @angular/animationspackage 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
  ],
  ...
})

Ce message d'erreur est souvent trompeur .

Vous avez peut- être oublié d'importer le fichier BrowserAnimationsModule. Mais ce n'était pas mon problème . J'importais BrowserAnimationsModuleà la racine AppModule, comme tout le monde devrait le faire.

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

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

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

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

1. Supprimer les node_modules dir
2. Effacez le cache de votre package à l'aide de npm cache clean
3. Exécutez l'une de ces deux commandes répertoriées ici pour mettre à jour vos packages existants

Si vous rencontrez des erreurs 404 comme

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

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

Tout ce que j'avais à faire était d'installer ceci

npm install @angular/animations@latest --save  

puis importez

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

dans votre app.module.tsdossier.

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)

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

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

La mise à niveau vers 4.4.6 a fait l'affaire et a ajouté le dossier / animations sous node_modules / @ angular / platform-browser

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

router.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 dans n'importe quel 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 l'animation dans votre app.module.ts

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

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

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

CompA --- @Component ({

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

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

Pour moi, c'est parce que j'ai mis le nom de l'animation entre crochets.

<div [@animation]></div>

Mais après avoir retiré le support, tout a bien fonctionné (dans Angular 9.0.1):

<div @animation></div>

J'ai eu une 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. Bon codage !!

Essaye ça

npm install @ angular / animations @ latest --save

importer {BrowserAnimationsModule} depuis '@ angular / platform-browser / animations';

cela fonctionne pour moi.

Ajoutez simplement .. import {BrowserAnimationsModule} depuis '@ angular / platform-browser / animations';

importations: [.. BrowserAnimationsModule

],

dans le fichier app.module.ts.

assurez-vous que vous avez installé .. npm install @ angular / animations @ latest --save

Mise à jour pour angularJS 4:

Erreur: Erreur (SystemJS) XHR (404 Not Found) chargement de http: // localhost: 3000/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js/animations

Solution:

**cli:** (command/terminal)
npm install @angular/animations@latest --save

**systemjs.config.js** (edit file)
'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',

**app.module.ts** (edit file)
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
  imports:      [ BrowserModule,BrowserAnimationsModule ],
...

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

@NgModule({
  declarations: [   --   ],
  imports: [BrowserAnimationsModule],
  providers: [],
  bootstrap: []
})