'Trovato la proprietà sintetica @panelState. Includi "BrowserAnimationsModule" o "NoopAnimationsModule" nella tua applicazione. "

Ho aggiornato un progetto Angular 4 usando angular-seed e ora ottengo l'errore

Trovato la proprietà sintetica @panelState. Includi "BrowserAnimationsModule" o "NoopAnimationsModule" nella tua applicazione.

Come posso risolvere questo problema? Cosa mi dice esattamente il messaggio di errore?

Assicurarsi che il @angular/animationspacchetto sia installato (ad es. Eseguendo npm install @angular/animations). Quindi, in app.module.ts

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

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

Questo messaggio di errore è spesso fuorviante .

Si potrebbe aver dimenticato di importare il BrowserAnimationsModule. Ma questo non era il mio problema . Stavo importando BrowserAnimationsModulenella radiceAppModule , come dovrebbero fare tutti.

Il problema era qualcosa di completamente estraneo al modulo. Stavo animando un *ngIfmodello nel componente ma mi ero dimenticato di menzionarlo nella @Component.animations classe componente .

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

Se usi un'animazione in un modello, devi anche elencarla ogni volta nei animationsmetadati del componente ... ogni volta .

Ho riscontrato problemi simili, quando ho provato a utilizzare il BrowserAnimationsModule. I seguenti passaggi hanno risolto il mio problema:

1. Elimina i node_modules dir
2. Svuota la cache del pacchetto utilizzando npm cache clean
3. Esegui uno di questi due comandi elencati qui per aggiornare i pacchetti esistenti

Se si verificano errori 404 come

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

aggiungi le seguenti voci mapnel tuo 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 ha fornito la soluzione su questo problema github .

Tutto quello che dovevo fare era installare questo

npm install @angular/animations@latest --save  

e quindi importare

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

nel tuo app.module.tsfile.

Per me, ho perso questa affermazione in @Component decorator: animations: [yourAnimation]

Una volta aggiunta questa affermazione, gli errori sono scomparsi. (Angolare 6.x)

Il mio problema era che il mio @ angular / platform-browser era nella versione 2.3.1

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

L'aggiornamento alla 4.4.6 ha fatto il trucco e ha aggiunto la cartella / animations in node_modules / @ angular / platform-browser

Dopo aver installato un modulo di animazione, crei un file di animazione nella cartella dell'app.

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%)' }))
            ])
        ]);
    }

Quindi importare questo file di animazione in qualsiasi componente.

Nel tuo file component.ts

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

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

Non dimenticare di importare l'animazione in app.module.ts

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

L'animazione deve essere applicata sul componente specifico.

ES: utilizzo della direttiva animazione in altri componenti e fornito in un altro.

CompA --- @Component ({

animazioni: [animazione]}) CompA --- @Component ({

animazioni: [animazione] <=== questo dovrebbe essere fornito nel componente usato})

Per me è stato perché ho inserito il nome dell'animazione tra parentesi quadre.

<div [@animation]></div>

Ma dopo aver rimosso la parentesi tutto ha funzionato bene (In Angular 9.0.1):

<div @animation></div>

Ho seguito l'errore:

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

Seguo la risposta accettata da Ploppy e il mio problema è stato risolto.

Ecco i passaggi:

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.

Risolverà l'errore. Buona programmazione !!

Prova questo

npm install @ angular / animations @ latest --save

importare {BrowserAnimationsModule} da "@ angular / platform-browser / animations";

questo funziona per me.

Aggiungi semplicemente ... import {BrowserAnimationsModule} da "@ angular / platform-browser / animations";

importazioni: [.. BrowserAnimationsModule

],

nel file app.module.ts.

assicurati di aver installato .. npm install @ angular / animations @ latest --save

Aggiornamento per angularJS 4:

Errore: errore XHR (SystemJS) (404 non trovato) durante il caricamento di http: // localhost: 3000/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js/animations

Soluzione:

**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: []
})