พบคุณสมบัติสังเคราะห์ @panelState โปรดรวม“ BrowserAnimationsModule” หรือ“ NoopAnimationsModule” ในแอปพลิเคชันของคุณด้วย '

ฉันอัพเกรดโครงการ Angular 4 โดยใช้เมล็ดเชิงมุมและตอนนี้ได้รับข้อผิดพลาด

พบคุณสมบัติสังเคราะห์ @panelState โปรดระบุ "BrowserAnimationsModule" หรือ "NoopAnimationsModule" ในแอปพลิเคชันของคุณ

ฉันจะแก้ไขสิ่งนี้ได้อย่างไร ข้อความแสดงข้อผิดพลาดบอกอะไรฉันอย่างแน่นอน

ตรวจสอบให้แน่ใจว่า@angular/animationsมีการติดตั้งแพ็คเกจ (เช่นเมื่อใช้งานnpm install @angular/animations) จากนั้นใน app.module.ts ของคุณ

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

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

นี้ข้อผิดพลาดมักจะเข้าใจผิด

คุณอาจBrowserAnimationsModuleจะลืมที่จะนำเข้า แต่นั่นก็ไม่ใช่ปัญหาของฉัน ฉันกำลังนำเข้าBrowserAnimationsModuleในรูAppModuleทอย่างที่ทุกคนควรทำ

ปัญหาคือสิ่งที่ไม่เกี่ยวข้องกับโมดูลอย่างสมบูรณ์ ผมได้รับแรงบันดาล*ngIfในแม่แบบองค์ประกอบ แต่ฉันได้ลืมที่จะพูดถึงมันใน สำหรับชั้นส่วนประกอบ@Component.animations

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

ถ้าคุณใช้ภาพเคลื่อนไหวในแม่คุณยังต้องแสดงรายการแอนิเมชั่ว่าในองค์ประกอบของanimationsเมตาดาต้า ...ทุกครั้ง

BrowserAnimationsModuleฉันวิ่งเข้าไปในปัญหาที่คล้ายกันเมื่อฉันพยายามที่จะใช้ ขั้นตอนต่อไปนี้แก้ไขปัญหาของฉัน:

1. ลบnode_modules dir
2. ล้างแคชแพ็คเกจของคุณโดยใช้ npm cache clean
3. รันหนึ่งในสองคำสั่งที่ระบุไว้ที่นี่เพื่ออัพเดตแพ็คเกจที่มีอยู่ของคุณ

หากคุณพบข้อผิดพลาด 404 เช่น

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

เพิ่มรายการต่อไปนี้mapใน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จัดให้มีการแก้ปัญหาในเรื่องนี้ GitHub

สิ่งที่ฉันต้องทำก็คือติดตั้ง

npm install @angular/animations@latest --save  

แล้วนำเข้า

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

ลงในapp.module.tsไฟล์ของคุณ

สำหรับฉันฉันพลาดคำสั่งนี้ในมัณฑนากร @Component: แอนิเมชั่น: [yourAnimation]

เมื่อฉันเพิ่มคำสั่งนี้ข้อผิดพลาดไป (เชิงมุม 6.x)

ปัญหาของฉันคือ @ angular / platform-browser ของฉันเป็นรุ่น 2.3.1

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

การอัพเกรดเป็น 4.4.6 ได้ทำการหลอกลวงและเพิ่ม / ขยายโฟลเดอร์ภายใต้ node_modules / @ angular / platform-browser

หลังจากติดตั้งโมดูลภาพเคลื่อนไหวแล้วคุณสร้างไฟล์ภาพเคลื่อนไหวในโฟลเดอร์แอพของคุณ

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

จากนั้นคุณนำเข้าไฟล์ภาพเคลื่อนไหวนี้ไปยังองค์ประกอบใด ๆ ของคุณ

ในไฟล์ component.ts ของคุณ

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

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

อย่าลืมนำเข้าแอนิเมชั่นใน app.module.ts

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

ภาพเคลื่อนไหวควรใช้กับองค์ประกอบเฉพาะ

EX: การใช้คำสั่งภาพเคลื่อนไหวในองค์ประกอบอื่นและให้ไว้ในที่อื่น

CompA --- @Component ({

ภาพเคลื่อนไหว: [ภาพเคลื่อนไหว]}) CompA --- @Component ({

แอนิเมชั่น: [แอนิเมชั่น] <=== ควรระบุไว้ในคอมโพเนนต์ที่ใช้แล้ว))

สำหรับฉันเพราะฉันใส่ชื่อแอนิเมชั่นไว้ในวงเล็บเหลี่ยม

<div [@animation]></div>

แต่หลังจากฉันลบวงเล็บทั้งหมดทำงานได้ดี (In Angular 9.0.1):

<div @animation></div>

ฉันพบข้อผิดพลาดด้านล่าง:

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

ฉันทำตามคำตอบที่ได้รับการยอมรับโดย Ploppy และแก้ไขปัญหาของฉันได้

นี่คือขั้นตอน:

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.

มันจะแก้ไขข้อผิดพลาด การเข้ารหัสที่มีความสุข !!

ลองสิ่งนี้

npm install @ angular / animations @ ล่าสุด --save

นำเข้า {BrowserAnimationsModule} จาก '@ angular / platform-browser / animation';

มันใช้งานได้สำหรับฉัน

เพียงเพิ่ม .. นำเข้า {BrowserAnimationsModule} จาก '@ angular / platform-browser / animation';

นำเข้า: [.. BrowserAnimationsModule

]

ในไฟล์ app.module.ts

ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง .. npm install @ angular / animations @ latest --save

อัปเดตสำหรับ angularJS 4:

ข้อผิดพลาด: การโหลดข้อผิดพลาด (SystemJS) XHR (ไม่พบ 404) http: // localhost: 3000/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js/animations

สารละลาย:

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