'Đã tìm thấy tài sản tổng hợp @panelState. Vui lòng bao gồm cả Browser BrowserAnimationsModule, hoặc No NoAnAnationsationsModule, trong ứng dụng của bạn. '

Tôi đã nâng cấp một dự án Angular 4 bằng angular-seed và bây giờ gặp lỗi

Tìm thấy tài sản tổng hợp @panelState. Vui lòng bao gồm "BrowserAnimationsModule" hoặc "NoopAnimationsModule" trong ứng dụng của bạn.

Làm thế nào tôi có thể sửa lỗi này? Chính xác thì thông báo lỗi cho tôi biết là gì?

Đảm bảo @angular/animationsgói được cài đặt (ví dụ: bằng cách chạy npm install @angular/animations). Sau đó, trong app.module.ts của bạn

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

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

Thông báo lỗi này thường gây hiểu nhầm .

Bạn có thể đã quên nhập BrowserAnimationsModule. Nhưng đó không phải là vấn đề của tôi . Tôi đã nhập BrowserAnimationsModuletrong thư mục gốc AppModule, như mọi người nên làm.

Vấn đề là một cái gì đó hoàn toàn không liên quan đến các mô-đun. Tôi đã tạo hiệu ứng *ngIftrong một mẫu thành phần nhưng tôi đã quên đề cập đến nó trong @Component.animations lớp thành phần .

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

Nếu bạn sử dụng hoạt hình trong một mẫu, bạn cũng phải liệt kê hoạt hình đó trong animationssiêu dữ liệu của thành phần ... mỗi lần .

Tôi gặp vấn đề tương tự, khi tôi cố gắng sử dụng BrowserAnimationsModule. Các bước sau đã giải quyết vấn đề của tôi:

1. Xóa thư mục node_modules
2. Xóa bộ nhớ cache gói của bạn bằng cách sử dụng npm cache clean
3. Chạy một trong hai lệnh được liệt kê ở đây để cập nhật các gói hiện có của bạn

Nếu bạn gặp lỗi 404 như

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

thêm các mục sau vào maptrong system.config.js của bạn :

'@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 đã cung cấp giải pháp cho vấn đề github này .

Tất cả tôi phải làm là cài đặt cái này

npm install @angular/animations@latest --save  

và sau đó nhập khẩu

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

vào app.module.tstập tin của bạn .

Đối với tôi, tôi đã bỏ lỡ tuyên bố này trong trang trí @Component: hình động: [yourAnimation]

Khi tôi thêm tuyên bố này, lỗi đã biến mất. (Góc 6.x)

Vấn đề của tôi là trình duyệt @ angular / platform-platform của tôi đã có trên phiên bản 2.3.1

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

Nâng cấp lên 4.4.6 đã thực hiện thủ thuật và thêm thư mục / hình động dưới nút_modules / @ angular / platform-browser

Sau khi cài đặt một mô-đun hoạt hình, sau đó bạn tạo một tệp hoạt hình trong thư mục ứng dụng của bạn.

bộ định tuyến.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%)' }))
            ])
        ]);
    }

Sau đó, bạn nhập tệp hoạt hình này vào bất kỳ thành phần nào của bạn.

Trong tập tin thành phần của bạn

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

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

Đừng quên nhập hình ảnh động trong app.module.ts của bạn

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

Các hình ảnh động nên được áp dụng trên các thành phần cụ thể.

EX: Sử dụng chỉ thị hoạt hình trong thành phần khác và được cung cấp trong phần khác.

CompA --- @Component ({

hình động: [hoạt hình]}) CompA --- @Component ({

hình ảnh động: [hình ảnh động] <=== điều này nên được cung cấp trong thành phần được sử dụng})

Đối với tôi là vì tôi đặt tên hoạt hình trong dấu ngoặc vuông.

<div [@animation]></div>

Nhưng sau khi tôi loại bỏ khung, tất cả đều hoạt động tốt (Trong Angular 9.0.1):

<div @animation></div>

Tôi đã nhận được lỗi dưới đây:

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

Tôi làm theo câu trả lời được chấp nhận bởi Ploppy và nó đã giải quyết vấn đề của tôi.

Dưới đây là các bước:

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.

Nó sẽ giải quyết lỗi. Chúc mừng mã hóa !!

Thử cái này

npm cài đặt @ angular / animations @ mới nhất --save

nhập {BrowserAnimationsModule} từ '@ angular / platform-browser / animations';

cái này hiệu quả với tôi

Chỉ cần thêm .. nhập {BrowserAnimationsModule} từ '@ angular / platform-browser / animations';

nhập khẩu: [.. BrowserAnimationsModule

],

trong tệp app.module.ts.

đảm bảo bạn đã cài đặt .. npm install @ angular / animations @ mới nhất --save

Cập nhật cho angularJS 4:

Lỗi: (SystemJS) lỗi XHR (404 Not Found) tải http: // localhost: 3000/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js/animations

Giải pháp:

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