业力测试：合成属性@transitionMessages。请在您的应用程序中包含“BrowserAnimationsModule”或“NoopAnimationsModule”答案

【问题标题】：Karma Test: the synthetic property @transitionMessages. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application业力测试：合成属性@transitionMessages。请在您的应用程序中包含“BrowserAnimationsModule”或“NoopAnimationsModule”
【发布时间】：2019-01-25 08:54:18
【问题描述】：

测试文件

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', () => {
  let component: ManagePageComponent;
  let fixture: ComponentFixture<ManagePageComponent>;

 beforeEach(async(() => {

    TestBed.configureTestingModule({
      declarations: [ ManagePageComponent ],
      imports: [
        BrowserAnimationsModule,
        RouterTestingModule,
        MatIconModule,
        MatTableModule,
        MatTabsModule,
        HttpClientModule,
      ],
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ManagePageComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

组件文件

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() {
  }

}

HTML

<div class="jumbotron">
  <h1>Creat and Edit</h1>
  <p>What inspires you today...</p>
  <div class="add-button">
    <div class="sub-button tl" (click)="goEdit()">
      <mat-icon>work</mat-icon>
    </div>
    <div class="sub-button tr" (click)="goEdit()">
      <mat-icon>description</mat-icon>
    </div>
    <div class="sub-button bl" (click)="goEdit()">
      <mat-icon>description</mat-icon>
    </div>
    <div class="sub-button br" (click)="goEdit()">
      <mat-icon>invert_colors</mat-icon>
    </div>
  </div>
</div>
 <div class="container">
  <div class="row">
    <div class="col-md-12">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

应用程序运行良好，此错误仅在 Karma 测试中发生。我还在 import: [] 数组的 app.module.ts 文件中导入了 BrowserAnimationsModule。互联网上的解决方案都不适合我...绝望...

我使用 angular cli 和 "@angular/animations": "^6.1.3"，已经在 package.json 中

【问题讨论】：

标签： javascript angular typescript angular-cli karma-jasmine

【解决方案1】：

在我的例子中，它通过在规范文件中导入 NoopAnimationsModule 来工作。

用 NoopAnimationsModule 替换 BrowserAnimationsModule。

import { NoopAnimationsModule } from '@angular/platform-browser/animations';

在你的 beforeEach 函数中，改变如下，

 imports: [
        NoopAnimationsModule,
        RouterTestingModule,
        MatIconModule,
        MatTableModule,
        MatTabsModule,
        HttpClientModule,
      ],

【讨论】：

我仍然遇到同样的错误，即使在导入模块中进行了此替换之后...