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

Question

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

  

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

我该如何解决这个问题？究竟是什么错误信息告诉我？

Answer 1

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

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

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

Answer 2

此错误消息经常会误导人。

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

问题是与模块完全无关的东西。我在组件模板中制作了一个*ngIf的动画，但是我忘记了在组件类的 @Component.animations 中 strong>。

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

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

Answer 3

I ran into similar issues, when I tried to use the BrowserAnimationsModule. Following steps solved my problem:

1. Delete the node_modules dir
2. Clear your package cache using npm cache clean
3. Run one of these two commands listed here to update your existing packages

If you experience a 404 errors like

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

add following entries to map in your 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 provided the solution on this github issue.

Answer 4

我所要做的就是安装这个

npm install @angular/animations@latest --save  

然后导入

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

进入app.module.ts文件。

Answer 5

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

添加此语句后，错误消失了。 （角度为6.x）

Answer 6

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

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

在node_modules / @ angular / platform-b​​rowser

下升级到4.4.6的诀窍和添加/动画文件夹

Answer 7

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

  

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

Answer 8

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

<div [@animation]></div>

但是，在我卸下支架之后，一切正常（在Angular 9.0.1中）：

<div @animation></div>

Answer 9

我遇到了以下错误：

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 10

动画应应用于特定的组件。

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

CompA --- @Component  （{

---

---

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

---

---

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

Answer 11

试试这个

  

npm install @ angular / animations @ latest --save

从@ angular / platform-b​​rowser / animations＆＃39;中导入{BrowserAnimationsModule};

这适合我。

Answer 12

在你最喜欢的cmd中

npm install @ angular / animations @ latest --save

古德勒克

Answer 13

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

进口：[     ..     BrowserAnimationsModule

]，

在app.module.ts文件中

。

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

Answer 14

更新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 ],
...

Answer 15

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

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