角度2のアニメーションは機能しません

Question

アニメーションの角度2のドキュメント（https://angular.io/docs/ts/latest/guide/animations.html）に続いて、角度4.0.1に移行しました。私のカスタムコンポーネントもIインサイド

"@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 ], 
... 
}) 

：ここに私のpackage.jsonの一部です角度アニメーションをインポートしました：

import { trigger, state, style, animate, transition } from '@angular/animations'; 

そして、私のビュー（！templateUrlによって割り当てられた外部ビュー）は次のようになります。

<div class="container" [@containerState]="showContainer"> 
... 
</div> 

問題がある：

エラー：キャッチされない（で私はいつものコンソールエラーメッセージが表示されますpromise）：エラー：合成プロパティ@containerStateが見つかりました。アプリケーションに「BrowserAnimationsModule」または「NoopAnimationsModule」のいずれかを含めてください。

この合成プロパティを削除すると、すべて正常に動作しますが、角度アニメーションを使用できません。

アイデア？私は角度クリを使用しません！

---

更新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にアップグレードしようとします。

Answer 1

Angular2は、指定したアニメーションモジュールによって上書きされる '合成リスナー'を表す接頭辞 '@'を考慮します。しかし、自分で@記号を使用しています。<div class="container" [@containerState]="showContainer">

「@」を削除して、それが機能するかどうかを確認してください。