我用Angular -seed升级了一个Angular 4项目,现在得到了这个错误
找到合成属性@panelState。请在应用程序中包含“BrowserAnimationsModule”或“NoopAnimationsModule”。
我该如何解决这个问题?错误消息到底告诉我什么?
我用Angular -seed升级了一个Angular 4项目,现在得到了这个错误
找到合成属性@panelState。请在应用程序中包含“BrowserAnimationsModule”或“NoopAnimationsModule”。
我该如何解决这个问题?错误消息到底告诉我什么?
当前回答
--
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
---
@NgModule({
declarations: [ -- ],
imports: [BrowserAnimationsModule],
providers: [],
bootstrap: []
})
其他回答
--
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
---
@NgModule({
declarations: [ -- ],
imports: [BrowserAnimationsModule],
providers: [],
bootstrap: []
})
确保@angular/animations包已经安装(例如,通过运行npm install @angular/animations)。然后,在app.module.ts中
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
...,
imports: [
...,
BrowserAnimationsModule
],
...
})
此错误消息通常具有误导性。
你可能忘记了导入BrowserAnimationsModule。但那不是我的问题。我在根AppModule中导入BrowserAnimationsModule,就像每个人都应该做的那样。
问题与模块完全无关。我在组件模板中动画一个*ngIf,但我忘记在@Component中提到它。组件类的动画。
@Component({
selector: '...',
templateUrl: './...',
animations: [myNgIfAnimation] // <-- Don't forget!
})
如果你在模板中使用一个动画,你也必须在组件的动画元数据中列出该动画…每一次。
一个简单的解决方案是,不要在你的lazyloaded或子模块中导入BrowserAnimationsModule,只在你的AppModule中导入。如果在运行组件测试时遇到相同的错误,请将其添加到测试平台的导入数组中。请注意。如果你没有自己定义的动画,这是可行的
在安装动画模块之后,你可以在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';