Question

我的应用程序中有一些浏览器动画可以正常工作而没有错误。当我运行ng test时，即使我在BrowserAnimationsModule文件中包含app.module.ts，我也会收到此错误。我在HeaderComponent

中使用了动画

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';

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

import { registerLocaleData } from '@angular/common';
import localeEs from '@angular/common/locales/es';

registerLocaleData(localeEs, 'es-us')

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我已经尝试了this solution但仍有同样的问题..

Answer 1

您只需要模拟动画

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        NoopAnimationsModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));
});

如果要注入AnimationBuilder：

export class MyComponent implements OnInit {
    constructor(
        private builder: AnimationBuilder,
        ...
    ) { }

您需要像这样在规范文件中提供它：

TestBed.configureTestingModule({
      imports: [
        NoopAnimationsModule,
      ],
      declarations: ...,
      providers: [
        {
          provide: ...,
          useClass: ...
        },
          NoopAnimationsModule,
        {
          provide: ...,
          useValue: ...,
        }
      ]
    })
    .compileComponents();
  }));

Answer 2

仅将NoopAnimationsModule导入规范文件的imports数组中

imports: [...., NoopAnimationsModule],

Angular 5-ng测试 - 请包括＆＃34; BrowserAnimationsModule＆＃34;或者＆＃34; NoopAnimationsModule＆＃34;

2 个答案: