@PanelState sentetik özelliğini buldu. Lütfen uygulamanıza “BrowserAnimationsModule” veya “NoopAnimationsModule” ekleyin. '

Angular-seed kullanarak bir Angular 4 projesini yükselttim ve şimdi hatayı alıyorum

@PanelState sentetik özelliğini buldu. Lütfen uygulamanıza "BrowserAnimationsModule" veya "NoopAnimationsModule" ekleyin.

Bunu nasıl düzeltebilirim? Hata mesajı bana tam olarak ne söylüyor?

@angular/animationsPaketin kurulu olduğundan emin olun (örn. Çalıştırarak npm install @angular/animations). Ardından, app.module.ts içinde

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

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

Bu hata mesajı genellikle yanıltıcıdır .

Dosyayı içe aktarmayı unutmuş olabilirsinizBrowserAnimationsModule . Ama bu benim sorunum değildi . Herkesin yapması gerektiği gibi BrowserAnimationsModule, kökten içe aktarıyordum AppModule.

Sorun, modülle tamamen alakasız bir şeydi. *ngIfBileşen şablonunda bir canlandırıyordum ama bileşen sınıfında bundan bahsetmeyi unutmuştum .@Component.animations

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

Bir şablonda bir animasyon kullanırsanız, bu animasyonu her seferinde bileşenin animationsmeta verilerinde de listelemeniz gerekir .

Kullanmaya çalıştığımda benzer sorunlarla karşılaştım BrowserAnimationsModule. Aşağıdaki adımlar sorunumu çözdü:

1. Sil node_modules dir
2. Kullanarak paket önbelleğinizi temizleyin npm cache clean
3. Mevcut paketlerinizi güncellemek için burada listelenen bu iki komuttan birini çalıştırın

Gibi bir 404 hatasıyla karşılaşırsanız

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

aşağıdaki girdileri ekleyin mapsizin de 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 bu github sorununa çözüm sağladı .

Tek yapmam gereken bunu kurmaktı

npm install @angular/animations@latest --save  

ve sonra içe aktar

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

senin içine app.module.tsdosyası.

Benim için, @Component decorator: animations: [yourAnimation] 'daki bu ifadeyi kaçırdım

Bu ifadeyi ekledikten sonra hatalar gitti. (Açısal 6.x)

Bir animasyon modülü kurduktan sonra, uygulama klasörünüzün içinde bir animasyon dosyası oluşturursunuz.

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

Ardından bu animasyon dosyasını herhangi bir bileşeninize aktarırsınız.

Component.ts dosyanızda

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

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

App.module.ts dosyanıza animasyon aktarmayı unutmayın

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

Benim sorunum, @ angular / platform-browser'ımın 2.3.1 sürümünde olmasıydı.

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

4.4.6'ya yükseltme hile yaptı ve node_modules / @ angular / platform-browser altında / animations klasörünü ekledi

Animasyon belirli bir bileşene uygulanmalıdır.

ÖR: Başka bir bileşende ve başka bir bileşende sağlanan animasyon yönergesini kullanma

CompA --- @Component ({

animasyonlar: [animasyon]}) CompA --- @Component ({

animasyonlar: [animasyon] <=== bu, kullanılan bileşende sağlanmalıdır})

Benim için animasyon adını köşeli parantez içine koymamdı.

<div [@animation]></div>

Ancak dirseği çıkardıktan sonra her şey yolunda gitti (Angular 9.0.1'de):

<div @animation></div>

Aşağıdaki hatayı aldım:

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

Ploppy tarafından kabul edilen cevabı takip ettim ve sorunumu çözdü.

İşte adımlar:

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.

Hatayı çözecektir. Mutlu kodlamalar !!

Bunu dene

npm install @ angular / animations @ latest --save

{BrowserAnimationsModule} öğesini '@ angular / platform-browser / animations'dan içe aktarın;

bu benim için çalışıyor.

Sadece ekleyin .. {BrowserAnimationsModule} '@ angular / platform-browser / animations'tan içe aktarın;

içe aktarmalar: [.. BrowserAnimationsModule

],

app.module.ts dosyasında.

yüklediğinizden emin olun .. npm install @ angular / animations @ latest --save

AngularJS 4 için güncelleme:

Hata: (SystemJS) XHR hatası (404 Bulunamadı) http: // localhost: 3000/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js/animations yüklenirken

Çözüm:

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