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

【问题标题】：'Found the synthetic property @panelState. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.''找到合成属性@panelState。请在您的应用程序中包含“BrowserAnimationsModule”或“NoopAnimationsModule”。
【发布时间】：2023-03-18 00:25:01
【问题描述】：

我使用 angular-seed 升级了 Angular 4 项目，现在出现错误

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

我该如何解决这个问题？错误消息到底告诉我什么？

【问题讨论】：

帮助我 - github.com/mgechev/angular-seed/issues/1880

标签： angular typescript angular-animations

【解决方案1】：

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

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

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

【讨论】：

如何查看是否安装在PC上？
npm list --depth=0 列出项目中已安装的包
如果已经安装，预期的结果是什么。？我只能看到这两个：├── @angular/platform-browser@4.3.5 ├── @angular/platform-browser-dynamic@4.3.5
我已经安装了所有的动画包，并在AppModule中导入了“BrowserAnimationsModule”。但它仍然收到错误。
@crossRT如果您在其他文件中创建动画，您是否也导入了动画？

【解决方案2】：

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

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

如果您遇到类似的 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。

【讨论】：

感谢您提供此信息...我很欣赏这是 Angular 的一个新版本，但感觉就像是在一个又一个问题上解决问题，并且在像这些变通方法中磕磕绊绊，这是一场永无止境的斗争。这是严重的用户不友好的东西。
@MikeGledhill 是的，在过去的一年里，他们在让事情变得容易升级方面确实做得很糟糕。这是一次悲惨的经历。
我今天发现，这个问题只有在你的项目基于 Angular 快速启动种子时才会出现。新的 Angular cli 不使用这种配置文件

【解决方案3】：

试试这个

npm install @angular/animations@latest --save

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

这对我有用。

【讨论】：

-1;这大部分只是重复了几个月前发布的已接受答案，但也错过了将BrowserAnimationsModule 传递给@NgModule 装饰器的步骤。

【解决方案4】：

我所要做的就是安装这个

npm install @angular/animations@latest --save

然后导入

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

进入您的app.module.ts 文件。

【讨论】：

-1;这大部分只是重复了几个月前发布的已接受答案，但也错过了将BrowserAnimationsModule 传递给@NgModule 装饰器的步骤。它也与几个小时前发布的vikvincer's answer 几乎相同。
这不是任何人答案的重复。我的回答就是我所做的。 @NgModule 装饰器是正确的。虚拟相同加起来就是结论性的答案，伙计。你不需要标记。

【解决方案5】：

只需添加 .. 从'@angular/platform-browser/animations'导入{ BrowserAnimationsModule }；

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

],

在 app.module.ts 文件中。

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

【讨论】：

-1 用于复制已经在此处加载的其他答案中的内容。

【解决方案6】：

angularJS 4 更新：

错误：(SystemJS) XHR 错误 (404 Not Found) loading 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 ],
...

【讨论】：

-1; “angularJS 4”不是一个东西，不清楚你到底想在这里表达什么，因为你只是提供了一个错误消息和一个难以阅读的代码块，而没有一句解释。

【解决方案7】：

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

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

【讨论】：

请解释您的代码。单独发布代码对除了 OP 之外的任何人都没有帮助，而且他们不明白它为什么起作用（或不起作用）。
虽然这段代码 sn-p 可以解决问题，但它没有解释为什么或如何回答这个问题。请包括对您的代码的解释，因为这确实有助于提高您的帖子质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因
-1;这只是从接受的答案中复制内容。

【解决方案8】：

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

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

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

【讨论】：

这也最终将我的整个 Angular 项目升级到 4.4.6

【解决方案9】：

对我来说，我错过了@Component 装饰器中的这句话：动画：[你的动画]

添加此语句后，错误就消失了。 (Angular 6.x)

【讨论】：

其实angular documentation里有一个关于这个的页面。我应该有 RTFM

【解决方案10】：

安装动画模块后，您将在应用文件夹中创建一个动画文件。

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';

【讨论】：

【解决方案11】：

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

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

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

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

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

【讨论】：

当然。但与此同时，对于那些像我一样陷入困境并且只找到上述建议的人，我的回答让你再尝试一件事。
实际上，您需要验证您的应用组件（根父级）是否也包含此内容
我也得到了那个误导性错误（使用 Angular 7.1）
我正在使用 Angular 8.0.0 并得到了该异常，但是按照您所说的在组件中定义动画修复了所有问题，谢谢。
与@Alireza 相同，我在 Angular 8.0 上遇到了同样的错误。组件中包含的动画作品。

【解决方案12】：

我收到以下错误：

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.

它将解决错误。编码愉快！

【讨论】：

【解决方案13】：

动画应该应用在特定的组件上。

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

CompA --- @Component （{

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

animations : [animation]

【讨论】：

【解决方案14】：

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

<div [@animation]></div>

但是在我移除支架后一切正常（在 Angular 9.0.1 中）：

<div @animation></div>

【讨论】：