角2個動畫將無法正常工作

Question

繼角2的文檔動畫（https://angular.io/docs/ts/latest/guide/animations.html）我遷移到角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文件夾並運行全新安裝。之後，一切正常。很奇怪！我會嘗試另一個角度2.x的應用程序升級到4.x的角度

Answer 1

Angular2認爲前綴「@」代表一種「人造聽衆」，這應該由你指定動畫模塊覆蓋。但是，你正在使用的@符號自己，<div class="container" [@containerState]="showContainer">

嘗試刪除「@」，看是否適合你。