'Menemukan properti sintetis @panelState. Harap sertakan "BrowserAnimationsModule" atau "NoopAnimationsModule" di aplikasi Anda. '

Saya memutakhirkan proyek Angular 4 menggunakan benih sudut dan sekarang mendapatkan kesalahan

Menemukan properti sintetis @panelState. Harap sertakan "BrowserAnimationsModule" atau "NoopAnimationsModule" di aplikasi Anda.

Bagaimana saya bisa memperbaikinya? Apa sebenarnya pesan kesalahan yang memberitahu saya?

Pastikan @angular/animationspaket diinstal (misalnya dengan menjalankan npm install @angular/animations). Lalu, di app.module.ts Anda

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

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

Ini pesan kesalahan sering menyesatkan .

Anda mungkin lupa mengimpor BrowserAnimationsModule. Tapi itu bukan masalah saya . Saya mengimpor BrowserAnimationsModuledi root AppModule, seperti yang seharusnya dilakukan semua orang.

Masalahnya adalah sesuatu yang sama sekali tidak terkait dengan modul. Saya sedang menganimasikan*ngIf dalam komponen template tetapi saya lupa menyebutkannya di @Component.animations untuk kelas komponen .

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

Jika Anda menggunakan animasi dalam templat, Anda juga harus mencantumkan animasi itu dalam animationsmetadata komponen ... setiap kali .

Saya mengalami masalah serupa, ketika saya mencoba menggunakan BrowserAnimationsModule. Langkah-langkah berikut memecahkan masalah saya:

1. Hapus dir node_modules
2. Bersihkan cache paket Anda menggunakan npm cache clean
3. Jalankan salah satu dari dua perintah ini yang tercantum di sini untuk memperbarui paket yang ada

Jika Anda mengalami 404 kesalahan suka

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

tambahkan entri berikut ke mapdalam system.config.js Anda :

'@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 menyediakan solusi untuk masalah github ini .

Yang harus saya lakukan adalah menginstal ini

npm install @angular/animations@latest --save  

dan kemudian impor

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

ke dalam app.module.tsfile Anda .

Bagi saya, saya melewatkan pernyataan ini di dekorator @Component: animations: [yourAnimation]

Setelah saya menambahkan pernyataan ini, kesalahan hilang. (Angular 6.x)

Masalah saya adalah bahwa @ angular / platform-browser saya ada di versi 2.3.1

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

Upgrade ke 4.4.6 melakukan trik dan menambahkan / folder animasi di bawah node_modules / @ angular / platform-browser

Setelah memasang modul animasi maka Anda membuat file animasi di dalam folder aplikasi Anda.

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

Kemudian Anda mengimpor file animasi ini ke komponen Anda.

Di file component.ts Anda

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

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

Jangan lupa untuk mengimpor animasi di app.module.ts Anda

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

Animasi harus diterapkan pada komponen tertentu.

EX: Menggunakan arahan animasi di komponen lain dan disediakan di komponen lain.

CompA --- @Component ({

animasi: [animasi]}) CompA --- @Component ({

animasi: [animasi] <=== ini harus disediakan dalam komponen bekas})

Bagi saya itu karena saya memasukkan nama animasi ke dalam tanda kurung.

<div [@animation]></div>

Tetapi setelah saya melepas braket semuanya bekerja dengan baik (In Angular 9.0.1):

<div @animation></div>

Saya mendapat kesalahan di bawah ini:

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

Saya mengikuti jawaban yang diterima oleh Ploppy dan itu menyelesaikan masalah saya.

Berikut langkah-langkahnya:

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.

Itu akan menyelesaikan kesalahan. Selamat coding !!

Coba ini

npm instal @ angular / animations @ latest --save

impor {BrowserAnimationsModule} dari '@ angular / platform-browser / animations';

ini bekerja untuk saya.

Cukup tambahkan .. impor {BrowserAnimationsModule} dari '@ angular / platform-browser / animations';

impor: [.. BrowserAnimationsModule

],

dalam file app.module.ts.

pastikan Anda telah menginstal .. npm install @ angular / animations @ latest --save

Pembaruan untuk angularJS 4:

Kesalahan: (SystemJS) Kesalahan XHR (404 Tidak Ditemukan) memuat http: // localhost: 3000/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js/animations

Larutan:

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