角2个动画将无法正常工作

继角2的文档动画（https://angular.io/docs/ts/latest/guide/animations.html）我迁移到角4.0.1。这里是我的package.json的一部分：角2个动画将无法正常工作

"@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文件夹并运行全新安装。之后，一切正常。很奇怪！我会尝试另一个角度2.x的应用程序升级到4.x的角度

来源

2017-04-06 tmieruch

我看除了组件，'@Component所有必要的组件（{动画：。。[触发（ 'containerState'，[状态（ '*'，'，也我不知道'@角/动画/ browser'是必要的。 – Dylan

还要检查，如果你有这个“误导性的错误消息”的问题。https://github.com/angular/angular/issues/15581 – Val

我检查的一切。我也从网上下载角2例动画文档：[链接]（https://angular.io/docs/ts/latest/guide/animations.html），复制我的组件，一切工作正常。最后，它删除完整的node_modules文件夹并运行干净的安装后。 – tmieruch

Angular2认为前缀“@”代表一种“人造听众”，这应该由你指定动画模块覆盖。但是，你正在使用的@符号自己，<div class="container" [@containerState]="showContainer">

尝试删除“@”，看是否适合你。

来源

2017-05-03 20:27:27

这会导致我出现一个“已知属性”错误。 – isherwood

角2个动画将无法正常工作

回答

相关问题