'找到合成属性@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.但这不是我的问题.我正在导入BrowserAnimationsModuleroot AppModule,就像每个人都应该做的那样.

这个问题与模块完全无关.我*ngIf在组件模板中设置动画,但我忘 @Component.animations 了在组件类中提及它.

animations

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

Answer 3

当我试图使用时,我遇到了类似的问题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问题提供了解决方案.

Answer 4

如果有人在使用独立组件时正在寻找解决方案，请将其添加到您的 main.ts 文件中

import { importProvidersFrom } from '@angular/core';

bootstrapApplication(AppComponent,{
  providers:[importProvidersFrom([BrowserAnimationsModule])]
}); 

或使用

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

 bootstrapApplication(AppComponent, {
        providers: [
          provideAnimations()
        ]
  })

来源：如何将 BrowserAnimationsModule 或 NoopAnimationsModule 添加到独立组件？

Answer 5

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

路由器动画.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 6

我所要做的就是安装这个

npm install @angular/animations@latest --save  

然后导入

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

进入你的app.module.ts档案。

Answer 7

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

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