按照 Angular 2 动画文档 (https://angular.io/docs/ts/latest/guide/animations.html),我迁移到 Angular 4.0.1。这是我的 package.json 的一部分:
"@angular/common": "~4.0.1",
"@angular/compiler": "~4.0.1",
"@angular/core": "~4.0.1",
"@angular/forms": "~4.0.1",
"@angular/http": "~4.0.1",
"@angular/platform-browser": "~4.0.1",
"@angular/platform-browser-dynamic": "~4.0.1",
"@angular/router": "~4.0.1",
"@angular/animations": "~4.0.1",
"typescript": "^2.2.2",
"zone.js": "^0.8.4"
system.config.js
'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
'@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule, Title } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
@NgModule({
imports: [ BrowserModule, BrowserAnimationsModule, appRouting, FormsModule ],
...
})
在我的自定义组件中,我还导入了角度动画:
import { trigger, state, style, animate, transition } from '@angular/animations';
我的视图(由 templateUrl 分配的外部视图!)看起来像这样:
<div class="container" [@containerState]="showContainer">
...
</div>
问题是:我总是收到控制台错误消息:
错误:未捕获(承诺中):错误:找到合成属性@containerState。请在您的应用程序中包含“BrowserAnimationsModule”或“NoopAnimationsModule”。
当我删除这个合成属性时,一切正常,但我无法使用角度动画。
有什么想法吗?我不使用 angular-cli!
更新container.component.ts
import { Component, OnInit, OnDestroy, EventEmitter, HostListener, Input, Output } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';
@Component({
templateUrl: '...',
selector: '...',
animations: [
trigger('containerState', [
state('hide', style({transform: 'translateY(-102%)'})),
transition('hide => show', [
animate(500, style({transform: 'translateY(0)'}))
]),
transition('show => hide', [
animate(500, style({transform: 'translateY(-102%)'}))
])
])
]
})
目前正在运行...
我做了什么?删除完整的node_modules文件夹并运行全新安装。之后一切正常。很奇怪!我将尝试将另一个 Angular 2.x 应用程序升级到 Angular 4.x
Angular2 认为前缀“@”代表“合成监听器”,它应该被您指定的动画模块覆盖。但是,您自己使用了 @ 符号,
<div class="container" [@containerState]="showContainer">
尝试删除“@”,看看这是否适合您。
当我在
animations
指令中错误地指定 @Component(...)
属性时,我遇到了同样的错误。我有类似的东西:
@Component(
...
animations: [
{ provide: Class, useValue: ... }
]
...
)
检查动画数组中是否没有任何动画以外的内容。 希望它对某人有帮助。