title: Angular/4 - Route animation not working
body: <p>I'm trying to implement route animations in an Angular CLI project using Angular/4. I have been trying to follow <a href="http://jasonwatmore.com/post/2017/04/19/angular-2-4-router-animation-tutorial-example" rel="nofollow noreferrer">this</a> tutorial, but with limited success.</p>
  
  <p>My code reads</p>
  
  <p>/src/app/_animations/fadein.animation.ts</p>
  
  <pre><code>import { trigger, state, animate, transition, style } from '@angular/animations';
  
  export const fadeInAnimation =
  // trigger name for attaching this animation to an element using the 
  [@triggerName] syntax
      trigger('fadeInAnimation', [
  
          // route 'enter' transition
          transition(':enter', [
           // css styles at start of transition
          style({ opacity: 0 }),
           // animation and styles at end of transition
          animate('3000ms', style({ opacity: 1 }))
      ]),
  ]);
  </code></pre>
  
  <p>/src/app/dashboard/dashboard.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { SlimLoadingBarService } from 'ng2-slim-loading-bar';
  
  // import fade in animation
  import { fadeInAnimation } from './../_animations/fadein.animation';
  
  import { PickJob } from './../pick-jobs/pick-job';
  import { PickJobService } from './../pick-jobs/pick-job.service';
  import { FlashService } from './../flash/flash.service';
  
  @Component({
      templateUrl: './dashboard.component.html',
      styleUrls: ['./dashboard.component.css'],
      animations: [fadeInAnimation],
      host: { '[@fadeInAnimation]': '' }
  })
  export class DashboardComponent {}
  </code></pre>
  
  <p>/src/app/dashboard/dashboard.component.html</p>
  
  <pre><code>&lt;div class="container_flex"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
              &lt;div class="btn btn-block btn-primary block shadow"&gt;
                  Print Next Pick Job
              &lt;/div&gt;
              &lt;a class="btn btn-block btn-danger shadow" routerLink="/pick-jobs" routerLinkActive="menu-active"&gt;
                  List Pick Jobs
              &lt;/a&gt;
              &lt;a class="btn btn-block btn-warning shadow" routerLink="/cages/assign" routerLinkActive="menu-active"&gt;
                  Print Pick Cage Labels
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>/src/app/app.module.ts</p>
  
  <pre><code>...
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  ...
  @NgModule({
    imports: [    
        ...
        BrowserAnimationsModule,
        ...
  </code></pre>
  
  <p>The animation never runs else, has completed prior to page load. Not sure which. Can anybody spot the error in my code? Any advice is greatly appreciated</p>