'Znaleziono syntetyczną właściwość @panelState. W aplikacji należy uwzględnić „BrowserAnimationsModule” lub „NoopAnimationsModule”. '

Zaktualizowałem projekt Angular 4 za pomocą angular-seed i teraz otrzymuję błąd

Znaleziono właściwość syntetyczną @panelState. W aplikacji uwzględnij „BrowserAnimationsModule” lub „NoopAnimationsModule”.

Jak mogę to naprawić? Co dokładnie mówi mi komunikat o błędzie?

Upewnij się, że @angular/animationspakiet jest zainstalowany (np. Przez uruchomienie npm install @angular/animations). Następnie w pliku app.module.ts

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

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

Ten komunikat o błędzie często wprowadza w błąd .

Być może zapomniałeś zaimportować BrowserAnimationsModule. Ale to nie był mój problem . Importowałem BrowserAnimationsModulew katalogu głównym AppModule, tak jak wszyscy powinni.

Problem był czymś zupełnie niezwiązanym z modułem. Animowałem plik *ngIfw szablonie komponentów, ale zapomniałem o tym wspomnieć w @Component.animations klasie komponentów .

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

Jeśli używasz animacji w szablonie, musisz również umieścić tę animację w animationsmetadanych komponentu ... za każdym razem .

Napotkałem podobne problemy, gdy próbowałem użyć BrowserAnimationsModule. Poniższe kroki rozwiązały mój problem:

1. Usunięcie node_modules reż
2. Wyczyść pamięć podręczną pakietów za pomocą npm cache clean
3. Uruchom jedno z tych dwóch poleceń wymienionych tutaj, aby zaktualizować istniejące pakiety

Jeśli wystąpią błędy 404, takie jak

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

dodaj następujące wpisy do mapw swoim 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 dostarczył rozwiązanie tego problemu na githubie .

Wszystko, co musiałem zrobić, to zainstalować to

npm install @angular/animations@latest --save  

a następnie importuj

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

do app.module.tspliku.

W moim przypadku brakowało mi tego stwierdzenia w dekoratorze @Component: animations: [yourAnimation]

Po dodaniu tego oświadczenia błędy zniknęły. (Angular 6.x)

Mój problem polegał na tym, że moja przeglądarka @ angular / platform-browser była w wersji 2.3.1

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

Aktualizacja do 4.4.6 załatwiła sprawę i dodano folder / animations w node_modules / @ angular / platform-browser

Po zainstalowaniu modułu animacji utwórz plik animacji w folderze aplikacji.

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

Następnie importujesz ten plik animacji do dowolnego komponentu.

W pliku component.ts

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

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

Nie zapomnij zaimportować animacji do pliku app.module.ts

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

Animację należy zastosować na konkretnym komponencie.

EX: Użycie dyrektywy animacji w innym komponencie i udostępnionej w innym.

CompA --- @Component ({

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

animacje: [animacja] <=== to powinno być podane w używanym komponencie})

Dla mnie było tak, ponieważ umieściłem nazwę animacji w nawiasach kwadratowych.

<div [@animation]></div>

Ale po usunięciu wspornika wszystko działało dobrze (w Angular 9.0.1):

<div @animation></div>

Mam poniżej błąd:

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

Postępuję zgodnie z odpowiedzią zaakceptowaną przez Ploppy i to rozwiązało mój problem.

Oto kroki:

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.

To rozwiąże problem. Miłego kodowania !!

Spróbuj tego

npm install @ angular / animations @ latest --save

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

to działa dla mnie.

Po prostu dodaj ... importuj {BrowserAnimationsModule} z '@ angular / platform-browser / animations';

import: [.. BrowserAnimationsModule

],

w pliku app.module.ts.

upewnij się, że masz zainstalowany .. npm install @ angular / animations @ latest --save

Aktualizacja dla angularJS 4:

Błąd: (SystemJS) błąd XHR (404 nie znaleziono) ładowanie http: // localhost: 3000/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js/animations

Rozwiązanie:

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