Found the synthetic property @state. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application

Question

I get this error when adding animations into my application.

I found: Angular 4 - Import BrowserAnimationsModule or NoopAnimationsModule. I added the entries to 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'

I added the imports to app.module.ts (root module):

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 { }

And I also installed the animations package:

npm install @angular/animations@latest --save

What might I be missing?

edit: I know this question looks very much like an exact duplicate of the question I linked, which has various answers. Going through them didn't help though, which is why I am asking for something I am overlooking.

edit2: I also checked Importing BrowserAnimationsModule Throws 404 - SystemJS Config Issue? which aimed at the same solutions already named in Angular 4 - Import BrowserAnimationsModule... (above)

edit3: As the comments mentioned: I have imported BrowserModule and BrowserAnimationsModule. The code section above was updated to reflect that.

edit4: As I have the animations in a child module of my application, I tried all three variants: Doing the imports in the root module, importing in the child module and importing in both.

edit5: I checked the package versions with npm outdated and, reading How to update the angular2 version to the latest, found out about this bug: npm update --save duplicates devDependencies as dependencies. I realized I had always been updating my packages with npm update --save, that's why many packages were outdated. Sadly now they are up2date but it's still not working.

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

add below imports your app.module.ts

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

Answer 2

If you use animation in one of your components, you should add an animations extra-property to the @Component decorator.

If, for instance, your component have a slideInDownAnimation constant, as described in the official documentation, you'll have something like this :

// 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 3

I now understand that the error is thrown not due to the lack of modules importation:

app.module.ts

No need to import BrowserModule and BrowserAnimationsModule in here, if you are using `AppRoutingModule, you can import those later in there (app-routing.module.ts).

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

As François pointed out, the reference animations: [ slideInAnimation ] is required:

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'];
  }
}

animations.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>
<!-- ... -->

So the lack of referencing the animation in the component was the only thing causing the issue for me (since I always included the BrowserAnimationsModule).