title: Angular 4 - Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application
body: <p>I'm having a problem when I launch my Angular app on my browser. Everything works code speaking but I'm still getting this error:</p>
  <blockquote>
  <p>Found the synthetic property <code>@routerAnimations</code>. Please include either
  <code>BrowserAnimationsModule</code> or <code>NoopAnimationsModule</code> in your
  application.</p>
  </blockquote>
  <p>I already checked the posts on this subject and there's quite a lot but all of them answered the same:</p>
  <pre><code>import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  </code></pre>
  <p>and include it in the app module's imports.</p>
  <pre><code>imports: [
      BrowserAnimationsModule,
      ... 
  ]
  </code></pre>
  <p>That's what I did but still got the same error. I've been looking for hours for this solution. Anyone knows what could fix it ? Thanks</p>
  <p>Here's my package.json:</p>
  <pre><code>{
    &quot;name&quot;: &quot;angular-bc&quot;,
    &quot;version&quot;: &quot;0.0.0&quot;,
    &quot;license&quot;: &quot;MIT&quot;,
    &quot;scripts&quot;: {
      &quot;ng&quot;: &quot;ng&quot;,
      &quot;start&quot;: &quot;ng serve&quot;,
      &quot;build&quot;: &quot;ng build&quot;,
      &quot;test&quot;: &quot;ng test&quot;,
      &quot;lint&quot;: &quot;ng lint&quot;,
      &quot;e2e&quot;: &quot;ng e2e&quot;
    },
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@angular/animations&quot;: &quot;^4.2.4&quot;,
      &quot;@angular/common&quot;: &quot;^4.2.4&quot;,
      &quot;@angular/compiler&quot;: &quot;^4.2.4&quot;,
      &quot;@angular/core&quot;: &quot;^4.2.4&quot;,
      &quot;@angular/forms&quot;: &quot;^4.2.4&quot;,
      &quot;@angular/http&quot;: &quot;^4.2.4&quot;,
      &quot;@angular/platform-browser&quot;: &quot;^4.2.4&quot;,
      &quot;@angular/platform-browser-dynamic&quot;: &quot;^4.2.4&quot;,
      &quot;@angular/router&quot;: &quot;^4.2.4&quot;,
      &quot;core-js&quot;: &quot;^2.4.1&quot;,
      &quot;rxjs&quot;: &quot;^5.4.2&quot;,
      &quot;zone.js&quot;: &quot;^0.8.14&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@angular/cli&quot;: &quot;1.4.3&quot;,
      &quot;@angular/compiler-cli&quot;: &quot;^4.2.4&quot;,
      &quot;@angular/language-service&quot;: &quot;^4.2.4&quot;,
      &quot;@types/jasmine&quot;: &quot;~2.5.53&quot;,
      &quot;@types/jasminewd2&quot;: &quot;~2.0.2&quot;,
      &quot;@types/node&quot;: &quot;~6.0.60&quot;,
      &quot;codelyzer&quot;: &quot;~3.1.1&quot;,
      &quot;jasmine-core&quot;: &quot;~2.6.2&quot;,
      &quot;jasmine-spec-reporter&quot;: &quot;~4.1.0&quot;,
      &quot;karma&quot;: &quot;~1.7.0&quot;,
      &quot;karma-chrome-launcher&quot;: &quot;~2.1.1&quot;,
      &quot;karma-cli&quot;: &quot;~1.0.1&quot;,
      &quot;karma-coverage-istanbul-reporter&quot;: &quot;^1.2.1&quot;,
      &quot;karma-jasmine&quot;: &quot;~1.1.0&quot;,
      &quot;karma-jasmine-html-reporter&quot;: &quot;^0.2.2&quot;,
      &quot;protractor&quot;: &quot;~5.1.2&quot;,
      &quot;ts-node&quot;: &quot;~3.2.0&quot;,
      &quot;tslint&quot;: &quot;~5.3.2&quot;,
      &quot;typescript&quot;: &quot;~2.3.3&quot;
    }
  }
  </code></pre>
  <h3>Components : <em>copied from answer</em></h3>
  <pre class="lang-html prettyprint-override"><code>&lt;div [@routerAnimations]=&quot;myOutlet.state&quot;&gt;
      &lt;router-outlet #myOutlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  </code></pre>