在Angular 2 Animations文档（https://angular.io/docs/ts/latest/guide/animations.html）之后，我迁移到Angular 4.0.1。下面是我的包的一部分。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 ],
...
})

型
在我的自定义组件中，我还导入了Angular 动画：

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

型
和我的视图（由templateUrl分配的外部视图！）看起来像这样：

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

型

问题是：我总是得到一个控制台错误消息：

• 错误：Uncaught（in promise）：错误：找到合成属性@containerState。请在您的应用程序中包含“BrowserAnimationsModule”或“NoopAnimationsModule”。*

当我删除这个合成属性时，一切都很好，但我无法使用Angular Animations。
有什么想法吗？我不使用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