Angular '；找到了合成属性@panelState。请包括以下任何一项：；BrowserAnimationsModule“；或；NoopAnimationsModule“；在您的应用程序中；

我使用Angular种子升级了Angular 4项目，现在得到了错误

找到了合成属性@panelState。请在应用程序中包含“浏览动画模块”或“NoopAnimationsModule”

---

我怎样才能解决这个问题？错误消息到底告诉了我什么

确保安装了

@angular/animations

软件包（例如，通过运行

npm install@angular/animations

）。然后，在app.module.ts中

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

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

---

当我尝试使用

BrowserAnimationsModule

时，我遇到了类似的问题。以下步骤解决了我的问题：

删除节点_modules dir

使用

npm cache clean

运行列出的这两个命令中的一个以更新现有包

如果您遇到404错误，如

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

将以下条目添加到system.config.js中的

map

：

naveedahmed1提供了解决方案。

试试这个

npm安装@angular/animations@latest--保存

从“@angular/platform browser/animations”导入{BrowserAnimationsModule}

---

这对我很有用。

我所要做的就是安装这个

npm install @angular/animations@latest --save  

然后导入

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

进入你的

app.module.ts

文件。

只需添加。。 从“@angular/platform browser/animations”导入{BrowserAnimationsModule}

进口：[ .. 浏览动画模块

],

在app.module.ts文件中

---

确保已安装。。npm安装@angular/animations@latest--保存angularJS 4的更新：

错误：（SystemJS）XHR错误（404未找到）加载

解决方案：

**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 ],
...

---

我的问题是我的@angular/platform浏览器在版本2.3.1上

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

---

升级到4.4.6后，我在node_modules/@angular/platform browser下添加了/animations文件夹，我错过了@Component decorator: 动画：[你的动画]

一旦我添加了这个语句，错误就消失了。

---

（Angular 6.x）

安装动画模块后，在应用程序文件夹中创建动画文件

router.animation.ts

然后将此动画文件导入到任意组件

在component.ts文件中

不要忘记在app.module.ts中导入动画

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

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

---

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

您可能忘记导入

浏览动画模块

。但那不是我的问题。我在根

AppModule

中导入

BrowserAnimationsModule

，每个人都应该这样做

问题与模块完全无关。我在组件模板中制作了一个

*ngIf

的动画，但是我忘了在组件类的

@component.animations

中提到它

@组件({
选择器：“…”，
templateUrl:“./…”，
动画：[myNgIfAnimation]/我得到以下错误：

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

我遵循普洛皮接受的答案，它解决了我的问题

以下是步骤：

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.

它将解决错误。快乐编码！！
动画应应用于特定组件

例如：在其他组件中使用动画指令，并在其他组件中提供

CompA---@组件
({



动画：[动画]
})
CompA---@组件
({



动画：[animation]对我来说是因为我将动画名称放在方括号内

<div [@animation]></div>



但是在我移除支架后，所有的工作都很好（在Angular 9.0.1中）：


感谢您提供的信息……我很感激这是Angular的新版本，但这感觉像是一场无休止的斗争，一个问题接着一个问题，在这些工作环境中步履蹒跚。这对用户来说是非常不友好的。@MikeGledhill是的，在过去的一年里，他们确实完全沉迷于让东西易于升级。这是一次痛苦的经历。正如我今天发现的，只有当您的项目基于angular quickstart种子时，才会出现此问题。新的angular cli不使用这种配置文件帮助了我-请为您的代码提供解释。发布代码本身对除OP之外的任何人都没有帮助，他们也不理解它为什么有效（或不）。虽然此代码片段可能会解决此问题，但它不会解释为什么或如何回答此问题。请包括对您的代码的解释，因为这确实有助于提高您文章的质量。请记住，您将在将来为读者回答此问题，而这些人可能不知道您的代码建议的原因-1；这只是复制了已接受答案的内容。这也导致我的整个Angular项目升级到4.4.6-1；这主要是复制了几个月前发布的已接受答案，但也错过了传递
BrowserAnimationsM的步骤odule
到
@NgModule
装饰器。它实际上与几个小时前发布的内容完全相同。它不是任何人答案的副本。我的答案就是我所做的。@NgModule装饰器定义正确。虚拟相同的加起来就是结论性答案。你不需要标记。-1；这大部分只是重复了被接受的答案t在几个月前发布，但也错过了将
浏览动画模块
传递给
@NgModule
装饰程序的步骤。-1；“angularJS 4”这不是一件事，也不清楚您在这里到底想表达什么，因为您只提供了一条错误消息和一个难以阅读的代码块，而没有一句解释。-1用于复制已加载的内容
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

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

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.

<div [@animation]></div>

<div @animation></div>