找到合成属性@state.请在您的应用程序中包含"BrowserAnimationsModule"或"NoopAnimationsModule"

Question

在我的应用程序中添加动画时出现此错误.

我发现:Angular 4 - 导入BrowserAnimationsModule或NoopAnimationsModule.我将条目添加到systemjs.config.js:

'@angular/animations': 'node_modules/@angular/animations/bundles/animations.umd.min.js',
'@angular/animations/browser':'node_modules/@angular/animations/bundles/animations-browser.umd.js',
'@angular/platform-browser/animations': 'node_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.js'

我将导入添加到app.module.ts(根模块):

import { NgModule }         from '@angular/core';
import { BrowserModule }    from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
    imports:      [
        BrowserModule,
        BrowserAnimationsModule,
    ],
    declarations: [
      ...
    ],
    bootstrap:    [
        AppComponent
    ],
    providers:    [
        ...
    ]
})
export class AppModule { }

我还安装了动画包:

npm install @angular/animations@latest --save

我可能会失踪什么？

编辑: 我知道这个问题看起来非常像我链接的问题的完全重复,它有各种答案.虽然经过他们没有帮助,这就是为什么我要求我忽略的东西.

edit2: 我还检查了导入BrowserAnimationsModule引发404 - SystemJS配置问题？针对Angular 4中已经命名的相同解决方案 - Import BrowserAnimationsModule ...(上图)

edit3: 正如提到的评论:我导入了BrowserModule和BrowserAnimationsModule.上面的代码部分已更新以反映这一点.

edit4: 由于我在我的应用程序的子模块中有动画,我尝试了所有三种变体:在根模块中执行导入,在子模块中导入并在两者中导入.

编辑5: 我用npm过时检查了软件包版本,并阅读如何将angular2版本更新到最新版本,发现有关此错误:npm update --save将devDependencies复制为依赖项.我意识到我一直在更新我的软件包npm update --save,这就是为什么许多软件包已经过时的原因.可悲的是现在他们已经上升了,但它仍然没有用.

Package         Current   Wanted   Latest  Location
@types/jasmine   2.5.36   2.5.36   2.5.52  kidzpointz
@types/node      6.0.78   6.0.78    8.0.1  kidzpointz
jasmine-core      2.4.1    2.4.1    2.6.4  kidzpointz
protractor       4.0.14   4.0.14    5.1.2  kidzpointz
rxjs              5.0.1    5.0.1    5.4.1  kidzpointz
systemjs        0.19.40  0.19.40  0.20.14  kidzpointz
tslint           3.15.1   3.15.1    5.4.3  kidzpointz
typescript        2.4.0    2.4.0    2.3.4  kidzpointz

Answer 1

如果您在其中一个组件中使用动画，则应该animations向@Component装饰器添加一个额外的属性。

例如，如果您的组件有一个slideInDownAnimation常量，如官方文档中所述，您将拥有如下内容：

// others import ... 
import { slideInDownAnimation } from 'app/animations';

@Component({
    template: `...`,
    animations: [ slideInDownAnimation ] // this line is required
})
export class HeroDetailComponent implements OnInit {
    @HostBinding('@routeAnimation') routeAnimation = true;
    @HostBinding('style.display')   display = 'block';
    @HostBinding('style.position')  position = 'absolute';

    // ...
}

Answer 2

添加以下内容导入您的app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';