发现合成属性 @panelState。请包括 “BrowserAnimationsModule" 或 “NoopAnimationsModule" 在你的应用程序中。

我用Angular -seed升级了一个Angular 4项目，现在得到了这个错误

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

错误截图

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

185857 次浏览
小开
最佳答案

确保@angular/animations包已经安装(例如通过运行npm install @angular/animations)。然后，在app.module.ts中

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


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

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

  1. 删除node_modules目录
  2. 使用npm cache clean清除包缓存
  3. 运行在这里列出的两个命令中的一个来更新现有的包

如果你遇到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提供了解决方案在这个github问题上。

小开

试试这个

NPM install @angular/animations@latest

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

这对我很有用。

小开

我要做的就是安装这个

npm install @angular/animations@latest --save

然后导入

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

到你的app.module.ts文件。

小开

简单添加.. import {BrowserAnimationsModule} from '@angular/platform-browser/animations' < p >进口:( ．． BrowserAnimationsModule < / p >

),

在app.module.ts文件中。

确保您已经安装。NPM install @angular/animations@latest

小开

针对angularJS 4的更新:

(SystemJS) XHR错误(404 Not Found)加载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 ],
...
小开 
--
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
---


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

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

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

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

小开
对于我来说，我错过了@Component decorator中的这句话: 动画:[yourAnimation] < / p > 一旦我添加了这个语句，错误就消失了。 (角6. x) < / p >
小开

在安装动画模块之后，你可以在app文件夹中创建一个动画文件。

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

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

在你的组件中。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';
小开

这错误信息通常会误导人。

你五月已经忘记导入BrowserAnimationsModule。但是那个不是我的问题。我正在根AppModule中导入BrowserAnimationsModule，每个人都应该这样做。

问题与模块完全无关。我在组件模板中动画一个__abc0，但我有忘记在 @Component.animations 为组件类。

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

如果你在模板中使用动画，你也必须在组件的animations元数据中列出该动画…每次< em > < / em >。

小开

我得到以下错误:

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.

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

小开

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

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

CompA—@组件 ({< / p >

动画:[动画] }) CompA——@组件 ({< / p >

animations: [animation] <===这应该在used component中提供 }) < / p >

小开

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

<div [@animation]></div>

但在我移除括号后，一切都正常工作了(在Angular 9.0.1中):

<div @animation></div>
小开

一个简单的解决方案是，不要在你的lazyloaded或子模块中导入BrowserAnimationsModule，只在你的AppModule中导入。如果在运行组件测试时遇到相同的错误，请将其添加到测试平台的导入数组中。请注意。如果你没有自己定义的动画，这是可行的


提交答案