title: Angular - BrowserAnimationsModule animations error
body: <p>I´m trying to create fade out/fade in animations between pages in angular.</p>
  
  <p>I create animations.ts with fade</p>
  
  <pre><code>import {trigger,animate,transition,style,query} from "@angular/animations";
  
  export const fadeAnimation = trigger("fadeAnimation", [
    transition("* =&gt; *", [
      query(":enter", [style({ opacity: 0 })], { optional: true }),
      query(
        ":leave",
        [style({ opacity: 1 }), animate("0.3s", style({ opacity: 0 }))],
        { optional: true }
      ),
      query(
        ":enter",
        [style({ opacity: 0 }), animate("0.3s", style({ opacity: 1 }))],
        { optional: true }
      )
    ])
  ]);
  </code></pre>
  
  <p>Then in app.module i import BrowserAnimationsModule </p>
  
  <pre><code>import { AdminModule } from './admin/admin.module';
  import { AppRoutingModule } from './app-routing/app-routing.module';
  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [
      AppComponent,
    ],
    imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AppRoutingModule,
      AdminModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>Finally i add this add this animations in route</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
    &lt;app-admin-header&gt;&lt;/app-admin-header&gt;
    &lt;app-admin-left-side&gt;&lt;/app-admin-left-side&gt;
    &lt;main [@fadeAnimation]="o.isActivated ? o.activatedRoute : ''"&gt;
      &lt;router-outlet #o="outlet"&gt;&lt;/router-outlet&gt;
    &lt;/main&gt;
    &lt;app-admin-footer&gt;&lt;/app-admin-footer&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In this last component in console.log return</p>
  
  <blockquote>
    <p>Found the synthetic property @fadeAnimation. Please include either
    "BrowserAnimationsModule"</p>
  </blockquote>
  
  <p>I think i import animations right so i don´t know where is the error. I use Angular 7. Somebody know where is the error?</p>
  
  <p><strong>UPDATE</strong>: No works</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { fadeAnimation } from './../../../../app/animations.component';
  
  @Component({
    selector   : 'app-usuariosform',
    templateUrl: './form.component.html',
    styleUrls  : ['./form.component.css'],
    animations : [fadeAnimation]
  })
  </code></pre>