'找到合成属性@panelState。请在您的应用程序中包含“BrowserAnimationsModule”或“NoopAnimationsModule”。

确保已安装 @angular/animations 软件包（例如，通过运行 npm install @angular/animations）。然后，在你的 app.module.ts

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

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

---

此错误消息通常具有误导性。

您可能忘记了导入 BrowserAnimationsModule。但这不是我的问题。我在根目录 AppModule 中导入 BrowserAnimationsModule，每个人都应该这样做。

问题与模块完全无关。我在组件模板中为*ngIf 设置动画，但我忘记在 @Component.animations 组件类 中提及它。

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

如果您在模板中使用动画，您还必须在组件的animations元数据中列出该动画...每次。

---

当我尝试使用 BrowserAnimationsModule 时遇到了类似的问题。以下步骤解决了我的问题：

删除 node_modules 目录 使用 npm cache clean 清除包缓存 运行此处列出的这两个命令之一来更新现有包

如果您遇到 404 错误，例如

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

在您的 system.config.js 中将以下条目添加到 map：

'@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 提供了解决方案 on this github issue。

---

对我来说，我错过了 @Component 装饰器中的这个声明：动画：[yourAnimation]

一旦我添加了这个语句，错误就消失了。 （角度 6.x）

---

我所要做的就是安装这个

npm install @angular/animations@latest --save  

然后导入

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

到您的 app.module.ts 文件中。

---

安装动画模块后，您可以在 app 文件夹中创建一个动画文件。

路由器动画.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';

---

我的问题是我的 @angular/platform-browser 版本为 2.3.1

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

升级到 4.4.6 成功了，并在 node_modules/@angular/platform-browser 下添加了 /animations 文件夹

---

动画应应用于特定组件。

EX：在其他组件中使用动画指令并在另一个组件中提供。

CompA --- @Component ({

动画 : [动画] }) CompA --- @Component ({

动画：[动画] <=== 这应该在使用的组件中提供}）

---

对我来说是因为我将动画名称放在方括号内。

<div [@animation]></div>

但是在我移除支架后一切正常（在 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@latest --save

从'@angular/platform-browser/animations'导入{ BrowserAnimationsModule }；

这对我有用。

---

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

@NgModule({
  declarations: [   --   ],
  imports: [BrowserAnimationsModule],
  providers: [],
  bootstrap: []
})

---

只需添加 .. import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

进口：[ .. BrowserAnimationsModule

],

在 app.module.ts 文件中。

确保您已安装 .. npm install @angular/animations@latest --save

---

angularJS 4 的更新：

错误：（SystemJS）XHR 错误（404 Not Found）加载 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 ],
...

---