186

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

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

错误截图

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

4

14 回答 14

291

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

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

@NgModule({
  ...,
  imports: [
    ...,
    BrowserAnimationsModule
  ],
  ...
})
于 2017-04-05T21:25:55.190 回答
234

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

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

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

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

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

于 2018-09-26T01:04:36.643 回答
19

当我尝试使用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 问题的解决方案。

于 2017-04-06T17:06:28.113 回答
7

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

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

于 2018-07-09T08:39:56.870 回答
5

我所要做的就是安装这个

npm install @angular/animations@latest --save

然后导入

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

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

于 2017-06-09T17:11:58.887 回答
5

安装动画模块后，您可以在 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';
于 2018-09-13T07:12:13.113 回答
2

我的问题是我的 @angular/platform-b​​rowser 版本为 2.3.1

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

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

于 2017-10-22T20:12:05.237 回答
2

动画应应用于特定组件。

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

CompA --- @Component ({

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

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

于 2019-04-25T10:42:23.930 回答
2

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

<div [@animation]></div>

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

<div @animation></div>
于 2020-05-27T10:44:49.353 回答
-1

我收到以下错误：

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.

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

于 2018-10-17T10:25:29.650 回答
-3

试试这个

npm install @angular/animations@latest --save

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

这对我有用。

于 2017-06-09T11:02:35.053 回答
-3 
--
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
---

@NgModule({
  declarations: [   --   ],
  imports: [BrowserAnimationsModule],
  providers: [],
  bootstrap: []
})
于 2017-09-06T02:00:18.107 回答
-4

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

进口：[ .. BrowserAnimationsModule

],

在 app.module.ts 文件中。

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

于 2017-08-28T05:18:09.507 回答
-4

angularJS 4 的更新：

错误：（SystemJS）XHR 错误（404 Not Found）正在加载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 ],
...
于 2017-08-31T11:42:57.107 回答