title: Found the synthetic property @state. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application
body: <p>I get this error when adding animations into my application.</p>
  
  <p>I found: <a href="https://stackoverflow.com/questions/43241193/angular-4-import-browseranimationsmodule-or-noopanimationsmodule">Angular 4 - Import BrowserAnimationsModule or NoopAnimationsModule</a>. I added the entries to systemjs.config.js:</p>
  
  <pre><code>'@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'
  </code></pre>
  
  <p>I added the imports to app.module.ts (root module):</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>And I also installed the animations package:</p>
  
  <pre><code>npm install @angular/animations@latest --save
  </code></pre>
  
  <p>What might I be missing?</p>
  
  <p><strong>edit:</strong>
  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.</p>
  
  <p><strong>edit2:</strong>
  I also checked <a href="https://github.com/mgechev/angular-seed/issues/1880" rel="noreferrer">Importing BrowserAnimationsModule Throws 404 - SystemJS Config Issue?</a> which aimed at the same solutions already named in Angular 4 - Import BrowserAnimationsModule... (above)</p>
  
  <p><strong>edit3:</strong>
  As the comments mentioned:
  I have imported BrowserModule and BrowserAnimationsModule. The code section above was updated to reflect that.</p>
  
  <p><strong>edit4:</strong>
  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.</p>
  
  <p><strong>edit5:</strong>
  I checked the package versions with npm outdated and, reading <a href="https://stackoverflow.com/questions/36597780/how-do-i-correctly-upgrade-angular-2-npm-to-the-latest-version">How to update the angular2 version to the latest</a>, found out about this bug: <a href="https://github.com/npm/npm/issues/10531" rel="noreferrer"><code>npm update --save</code> duplicates devDependencies as dependencies</a>. I realized I had always been updating my packages with <code>npm update --save</code>, that's why many packages were outdated. Sadly now they are up2date but it's still not working.</p>
  
  <pre><code>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
  </code></pre>