【问题标题】：Found the synthetic property @state. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application找到合成属性@state。请在您的应用程序中包含“BrowserAnimationsModule”或“NoopAnimationsModule”
【发布时间】：2017-11-23 11:40:01
【问题描述】：

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

我找到了：Angular 4 - Import BrowserAnimationsModule or 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： 我还检查了Importing BrowserAnimationsModule Throws 404 - SystemJS Config Issue?，它针对已经在 Angular 4 中命名的相同解决方案 - Import BrowserAnimationsModule...（上）

edit3： 正如 cmets 提到的：我已经导入了 BrowserModule 和 BrowserAnimationsModule。上面的代码部分已更新以反映这一点。

edit4： 由于我的应用程序的子模块中有动画，因此我尝试了所有三种变体：在根模块中导入、在子模块中导入以及在两者中导入。

edit5： 我用 npm outdated 检查了包版本，并阅读了How to update the angular2 version to the latest，发现了这个错误：npm update --save duplicates devDependencies as dependencies。我意识到我一直在用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

【问题讨论】：

在您的 NgModule 文件 (app.module.ts) 中，您仍然需要执行 import 语句来导入模块。
感谢您的评论。我错过了将它们添加到这篇文章中。它们已经导入。
你能解决这个问题吗？在 prod 版本中运行时我遇到了类似的问题
遗憾的是，我不得不解决这个问题，目前无法对其进行测试。检查下面的答案。如果您找到答案，请告诉我，以便我标记它。

标签： angular animation

【解决方案1】：

在下面添加导入您的 app.module.ts

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

【讨论】：

感谢您的评论。我错过了将它们添加到这篇文章中。它们已经导入。

【解决方案2】：

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

例如，如果您的组件有一个 slideInDownAnimation 常量，如 the official documentation 中所述，您将拥有如下内容：

// 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';

    // ...
}

【讨论】：

辉煌的弗朗索瓦！将animations: [ slideInAnimation ] 添加到 app.component.ts 是我唯一需要做的事情。我不需要添加@HostBinding 行（可能的，从@angular/core 导入它们）。
在服务中如何做到这一点？

【解决方案3】：

我现在明白抛出错误不是因为缺少模块导入：

app.module.ts

这里不需要导入BrowserModule和BrowserAnimationsModule，如果你使用的是`AppRoutingModule，你可以在后面导入它们（app-routing.module.ts）。 p>

import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MyComponent } from './my/my.component';

@NgModule({
  declarations: [
    AppComponent,
    MyComponent,
  ],
  imports: [
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MyComponent } from './my/my.component';

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: '/my' },
  { path: 'my', component: MyComponent,
    data: {animation: 'AnimationsPage'}, // to reference later in animations.ts
  }
];

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.ts

作为François pointed out，需要引用animations: [ slideInAnimation ]：

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { slideInAnimation } from './animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [ slideInAnimation ] // adding the animation name here!
})

export class AppComponent {
  // ...
  prepareRoute(outlet: RouterOutlet) {
    return outlet && outlet.activatedRouteData &&
           outlet.activatedRouteData['animation'];
  }
}

动画.ts

import {
  transition,
  trigger,
  // ...
} from '@angular/animations';

export const slideInAnimation = trigger('routeAnimation', [
  transition('* => AnimationsPage', [ // referenced in app-routing.module.ts
  // ...
]);

app.component.html

<!-- ... -->
<section [@routeAnimation]="prepareRoute(outlet)">
  <router-outlet #outlet="outlet"></router-outlet>
</section>
<!-- ... -->

因此，组件中缺少引用动画是唯一导致我出现问题的原因（因为我总是包含BrowserAnimationsModule）。

【讨论】：

【解决方案4】：

在导入BrowserAnimationsModule 后，我也不断收到此错误，并且我还将animations: [] 元数据添加到我的组件中。我仍然收到此错误，但事实证明我已将动画元数据添加到错误的组件中。

一旦我将动画元数据添加到正确的组件 并且已正确导入BrowserAnimationsModule，错误就消失了。

显然您可能已经尝试过这个，但我只是想添加这个答案，以便当有人提出这个问题试图找出他们的问题时（就像我一样），他们可能会看到这个答案并仔细检查他们的代码。

【讨论】：

绝对有效的理由，感谢您的回答！ :) 由于这个问题已经快 2 年了，而且我没有可用的项目了，我无法检查和标记答案，但这是一个有效的建议，让下一个浏览这个问题的人继续阅读，所以谢谢你！ :)

【解决方案5】：

试试旧版本的@angular/core@2.4.5，它集成了动画模块在上面的版本 4 中，动画有自己的独立模块

我尝试在遇到相同问题的每个配置中使用来自 github 的 angular-cli、angular2-cli、angular-seed。

所以我下载了文档中给出的示例代码，并在上面开发了我的应用程序，它现在正在运行。请参考该示例中的 package.json 并在处理之前进行必要的更改。

【讨论】：

【解决方案6】：

就我而言，我有组件：

    import { Component, OnInit, AfterViewInit, Inject, ChangeDetectionStrategy } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

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


@Component({
  selector: 'app-map-show',
  templateUrl: './map-show.component.html',
  styleUrls: ['./map-show.component.css'],
  // changeDetection: ChangeDetectionStrategy.OnPush,
  animations: [
    trigger('slide', [
      state('topState', style({ transform: 'translateY(50%)' })),
      state('bottomState', style({ transform: 'translateY(0)' })),
      transition('* => *', animate(300))
    ])
  ]
})
export class MapShowComponent implements OnInit {....}

也添加到 app.module.ts 中取得了成功：

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

import { AppComponent } from './app.component';
import { MapShowComponent } from './map/map-show/map-show.component';

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

我希望它对某人有所帮助。

【讨论】：

【解决方案7】：

我收到此错误是因为我在子组件上使用了粗手指：

HTML：

<childComp @childID ...></childComp>

TS：

@ViewChild("childID")
myChildComp: ChildComponent;

当然，HTML 应该是：

<childComp #childID ...></childComp>

【讨论】：

【解决方案8】：

我刚刚发现我用 div 包装了 Prime ng 自动完成功能，并且由于这个原因出现了错误。我删除了 div，它工作正常

【讨论】：

嘿rudrakr！我不确定您的答案适用于这里...