title: Karma Test: the synthetic property @transitionMessages. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application
body: <p>TEST FILE</p>
  
  <pre><code>import { async, ComponentFixture, TestBed } from 
  '@angular/core/testing';
  
  import { BrowserAnimationsModule } from '@angular/platform- 
  browser/animations';
  
  import { ManagePageComponent } from './manage-page.component';
  import { MatIconModule } from '@angular/material/icon';
  import { RouterTestingModule } from '@angular/router/testing';
  import {MatTableModule} from '@angular/material/table';
  import { MatTabsModule } from '@angular/material/tabs';
  import { HttpClientModule } from '@angular/common/http';
  
  describe('ManagePageComponent', () =&gt; {
    let component: ManagePageComponent;
    let fixture: ComponentFixture&lt;ManagePageComponent&gt;;
  
   beforeEach(async(() =&gt; {
  
      TestBed.configureTestingModule({
        declarations: [ ManagePageComponent ],
        imports: [
          BrowserAnimationsModule,
          RouterTestingModule,
          MatIconModule,
          MatTableModule,
          MatTabsModule,
          HttpClientModule,
        ],
      })
      .compileComponents();
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(ManagePageComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    it('should create', () =&gt; {
      expect(component).toBeTruthy();
    });
  });
  </code></pre>
  
  <p>component file</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { MatIconModule } from '@angular/material/icon';
  import { Router, ActivatedRoute } from '@angular/router';
  
  
  @Component({
    selector: 'app-manage-page',
    templateUrl: './manage-page.component.html',
    styleUrls: ['./manage-page.component.scss'],
  })
  export class ManagePageComponent implements OnInit {
    goEdit() {
      this.router.navigate(['manage', 'edit']);
    }
    constructor(private router: Router) { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="jumbotron"&gt;
    &lt;h1&gt;Creat and Edit&lt;/h1&gt;
    &lt;p&gt;What inspires you today...&lt;/p&gt;
    &lt;div class="add-button"&gt;
      &lt;div class="sub-button tl" (click)="goEdit()"&gt;
        &lt;mat-icon&gt;work&lt;/mat-icon&gt;
      &lt;/div&gt;
      &lt;div class="sub-button tr" (click)="goEdit()"&gt;
        &lt;mat-icon&gt;description&lt;/mat-icon&gt;
      &lt;/div&gt;
      &lt;div class="sub-button bl" (click)="goEdit()"&gt;
        &lt;mat-icon&gt;description&lt;/mat-icon&gt;
      &lt;/div&gt;
      &lt;div class="sub-button br" (click)="goEdit()"&gt;
        &lt;mat-icon&gt;invert_colors&lt;/mat-icon&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
   &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
        &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>the app works fine, this error ONLY happens in Karma test. 
  I've also <strong>imported the BrowserAnimationsModule in the app.module.ts</strong> file in the imports: [] array. 
  None of the solutions on the internet works for me... Desperate...</p>
  
  <p>I use angular cli and <code>"@angular/animations": "^6.1.3"</code>, is already in the package.json</p>