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

Question

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

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

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

Answer 1

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

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

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

Answer 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。

Answer 3

试试这个

npm install @angular/animations@latest --save

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

这对我有用。

Answer 4

我所要做的就是安装这个

npm install @angular/animations@latest --save

然后导入

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

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

Answer 5

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

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

],

在 app.module.ts 文件中。

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

Answer 6

angularJS 4 的更新：

错误：(SystemJS) XHR 错误（404 未找到）加载 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 ],
...

Answer 7

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

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

Answer 8

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

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

升级到 4.4.6 成功了，并在 node_modules/@angular/platform-browser

下添加了 /animations 文件夹

Answer 9

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

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

Answer 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%)' }))
            ])
        ]);
    }

然后你将这个动画文件导入到你的任何组件中。

In your component.ts file

import { routerTransition } from '../../router.animations';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss'],
  animations: [routerTransition()]
})

Don't forget to import animation in your app.module.ts

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

Answer 11

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

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

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

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

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

Answer 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.

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

Answer 13

动画应应用于特定组件。

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

CompA --- @Component （{

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

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

Answer 14

对我来说是因为我把动画名称放在了方括号里。

<div [@animation]></div>

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

<div @animation></div>

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

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

typescript

angular

angular-animations