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

我使用angular-seed升级了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目录
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-b​​rowser在2.3.1版上

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

升级到4.4.6可以解决问题，并在node_modules / @ angular / platform-b​​rowser下添加了/ animations文件夹

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

路由器动画

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>

但是，在我卸下支架之后，一切正常（在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-保存

从“ @ angular / platform-b​​rowser / animations”导入{BrowserAnimationsModule}；

这对我有用。

只需从'@ angular / platform-b​​rowser / animations'添加.. import {BrowserAnimationsModule};

导入：[.. BrowserAnimationsModule

]，

在app.module.ts文件中。

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

更新angularJS 4：

错误：（SystemJS）XHR错误（404未找到）正在加载http：// localhost：3000/node_modules/@angular/platform-b​​rowser/bundles/platform-b​​rowser.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: []
})