'Die synthetische Eigenschaft @panelState gefunden. Bitte fügen Sie Ihrer Anwendung entweder "BrowserAnimationsModule" oder "NoopAnimationsModule" hinzu. '

Ich habe ein Angular 4-Projekt mit Angular-Seed aktualisiert und erhalte jetzt den Fehler

Gefunden die synthetische Eigenschaft @panelState. Bitte fügen Sie Ihrer Anwendung entweder "BrowserAnimationsModule" oder "NoopAnimationsModule" hinzu.

Wie kann ich das beheben? Was genau sagt mir die Fehlermeldung?

Stellen Sie sicher, dass das @angular/animationsPaket installiert ist (z npm install @angular/animations. B. durch Ausführen ). Dann in Ihrer app.module.ts

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

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

Diese Fehlermeldung ist oft irreführend .

Sie können haben die importiert werden vergessen BrowserAnimationsModule. Das war aber nicht mein Problem . Ich habe BrowserAnimationsModulein den Stamm importiert AppModule, wie es jeder tun sollte.

Das Problem hatte nichts mit dem Modul zu tun. Ich habe eine *ngIfin der Komponentenvorlage animiert, aber ich hatte vergessen, sie in der @Component.animations für die Komponentenklasse zu erwähnen .

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

Wenn Sie eine Animation in einer Vorlage verwenden, müssen Sie diese Animation auch jedes Mal in den animationsMetadaten der Komponente auflisten .

Ich bin auf ähnliche Probleme gestoßen, als ich versucht habe, das zu verwenden BrowserAnimationsModule. Folgende Schritte haben mein Problem gelöst:

1. Löschen Sie die node_modules dir
2. Leeren Sie Ihren Paket-Cache mit npm cache clean
3. Führen Sie einen dieser beiden hier aufgeführten Befehle aus , um Ihre vorhandenen Pakete zu aktualisieren

Wenn Sie einen 404-Fehler wie feststellen

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

Fügen Siemap in Ihrer system.config.js folgende Einträge hinzu :

'@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 lieferte die Lösung für dieses Github-Problem .

Alles was ich tun musste, war dies zu installieren

npm install @angular/animations@latest --save  

und dann importieren

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

in Ihre app.module.tsDatei.

Für mich habe ich diese Aussage in @Component decorator verpasst: animations: [yourAnimation]

Sobald ich diese Aussage hinzugefügt habe, sind Fehler verschwunden. (Winkel 6.x)

Mein Problem war, dass mein @ angle / platform-Browser auf Version 2.3.1 war

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

Ein Upgrade auf 4.4.6 hat den Trick ausgeführt und den Ordner / animations unter node_modules / @ angle / platform-browser hinzugefügt

Nach der Installation eines Animationsmoduls erstellen Sie eine Animationsdatei in Ihrem App-Ordner.

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

Anschließend importieren Sie diese Animationsdatei in eine beliebige Komponente.

In Ihrer component.ts-Datei

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

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

Vergessen Sie nicht, Animationen in Ihre app.module.ts zu importieren

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

Die Animation sollte auf die jeweilige Komponente angewendet werden.

EX: Verwenden der Animationsanweisung in einer anderen Komponente und Bereitstellen in einer anderen.

CompA --- @Component ({

Animationen: [Animation]}) CompA --- @Component ({

Animationen: [Animation] <=== dies sollte in der verwendeten Komponente bereitgestellt werden})

Für mich war, weil ich den Animationsnamen in eckige Klammern gesetzt habe.

<div [@animation]></div>

Aber nachdem ich die Halterung entfernt hatte, funktionierte alles einwandfrei (In Angular 9.0.1):

<div @animation></div>

Ich habe unten Fehler:

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

Ich folge der akzeptierten Antwort von Ploppy und sie hat mein Problem gelöst.

Hier sind die Schritte:

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.

Der Fehler wird behoben. Viel Spaß beim Codieren !!

Versuche dies

npm install @ angle / animations @ latest --save

{BrowserAnimationsModule} aus '@ angle / platform-browser / animations' importieren;

das funktioniert bei mir.

Einfach hinzufügen .. {BrowserAnimationsModule} aus '@ angle / platform-browser / animations' importieren;

Importe: [.. BrowserAnimationsModule

],

in der Datei app.module.ts.

Stellen Sie sicher, dass Sie .. npm install @ angle / animations @ latest --save installiert haben

Update für angleJS 4:

Fehler: (SystemJS) XHR-Fehler (404 nicht gefunden) beim Laden von http: // localhost: 3000/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js/animations

Lösung:

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