ng 测试：找到合成侦听器@transform.start。请在您的应用程序中包含“BrowserAnimationsModule”或“NoopAnimationsModule”

Question

我的ng build 命令运行良好。只有当我运行ng test 时才会发生此错误：

Error: Found the synthetic listener @transform.start. 
Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.
error properties: Object({ ngDebugContext: DebugContext_({ view: Object({ def: Object({ factory: Function, nodeFlags: 36945921, rootNodeFlags: 33554433, nodeMatchedQueries: 0, flags: 0x: 0, outputIndex: 0, checkIndex: 0, flags: 33554433, childFlags: 3391488, directChildFlags: 3391488, childMatchedQueries: 0, matchedQueries: Object({  }), matchedQueryIds: 0, references: Objens: '', name: '@transform', nonMinifiedName: '@transform', securityContext: 0, suffix: undefined }) ], bindingFlags: 40, outputs: [ Object({ type: 0, target: 'component', eventName: '@transfor'@transform.done', propName: null }) ], element: Object({ ns: '', name: 'craft-app-sidenav', attrs: [  ], template: null, componentProvider: 
at checkNoSyntheticProp (http://localhost:9876/_karma_webpack_/C:/git/ttbt-craft/craft-angular/node_modules/@angular/platform-browser/fesm5/platform-browser.js:1198:1)
at EmulatedEncapsulationDomRenderer2.push.../../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.listen (http://localhost:9876/_karma_webpack_/Ctform-browser.js:1186:1)
...

我已经找到this question，它有同样的错误。但是，上一个问题可能正在运行ng build，并且没有回答他们是否包含模块（我已经在这里完成了，所以它没有解决我的问题。）

就我而言，我将BrowserAnimationsModule 添加到：

1. app.module.ts
2. app-sidenav.module.ts
3. app-sidenav.component.spec.ts

请注意以上内容：

• 在上面的前两个“普通”模块中，我导入了BrowserAnimationsModule 文件，并将BrowserAnimationsModule 直接添加到imports 数组中as described here。
• 在上面的第三个模块“测试”模块中，我导入了BrowserAnimationsModule 文件并通过beforeEach(async(() => { TestBed.configureTestingModule(...)、as described here 将BrowserAnimationsModule 添加到imports 数组中
• 我已经使用NoopAnimationsModule 而不是BrowserAnimationsModule 重复了上述步骤，但仍然不起作用。
• 我已经导入了 BrowserAnimationsModule after the BrowserModule（在 imports 数组中），但我认为导入顺序并不重要...

请注意，错误抱怨合成 listener（相对于合成 property）。我没有在我的代码中定义的任何动画或HostListener 或角度动画。但是，我使用Angular Material，错误提到了@transform.start，它是在MatSidenavModule 的MatSidenav 组件中定义的（我确保导入MatSidenavModule）我modified my components' animations property as suggested elsewhere（即添加了属性animations: [matDrawerAnimations.transformDrawer] 到我的AppSidenavComponent，但它不起作用）。

我的源代码：

app-sidenav.component.spec.ts

import { CommonModule } from '@angular/common';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MatSidenavModule } from '@angular/material';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { AppSidenavRoutingModule } from './app-sidenav-routing.module';

import { AppSidenavComponent } from './app-sidenav.component';
import { AppSidenavService } from './app-sidenav.service';

export const APP_SIDENAV_IMPORTS = [
  BrowserModule,
  BrowserAnimationsModule,

  CommonModule,
  AppSidenavRoutingModule,
  MatSidenavModule,
  LayoutModule,
];

describe('AppSidenavComponent', () => {
  let component: AppSidenavComponent;
  let fixture: ComponentFixture<AppSidenavComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: APP_SIDENAV_IMPORTS,
      declarations: [AppSidenavComponent],
      providers: [AppSidenavService]
    })
      .compileComponents();
  }));

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

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

app-sidenav.component.ts

import { Component, OnInit, ElementRef, NgZone, Inject } from '@angular/core';
import { AppSidenavService } from './app-sidenav.service';
import { MatSidenav } from '@angular/material';
import { Platform } from '@angular/cdk/platform';
import { FocusTrapFactory, FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';

// https://stackoverflow.com/a/37521339/1175496
import { DOCUMENT } from '@angular/common';
// THIS IS NOT USED BECAUSE IT WOULD NOT CREATE THE DIRECTIVE AND EXPAND IT,
// EVEN THWN I EXTENDS MATSIDENAV
@Component({
  selector: 'craft-app-sidenav',
  templateUrl: './app-sidenav.component.html',
  styleUrls: ['./app-sidenav.component.scss']
})
export class AppSidenavComponent extends MatSidenav implements OnInit {
  // constructor(_elementRef: ElementRef, _focusTrapFactory: FocusTrapFactory, _focusMonitor: FocusMonitor, _platform: Platform, _doc: any);

  public opened: boolean = true;
  // compiler.js:485 Uncaught Error: Can't resolve all parameters for AppSidenavComponent: ([object Object], [object Object], [object Object], [object Object], [object Object], ?).
  constructor(public appSidenavService: AppSidenavService,
    _elementRef: ElementRef,
    _focusTrapFactory: FocusTrapFactory,
    _focusMonitor: FocusMonitor,
    _platform: Platform,
    _ngZone: NgZone,
    @Inject(DOCUMENT) _doc: any
  ) {
    super(_elementRef, _focusTrapFactory, _focusMonitor, _platform, _ngZone, _doc);
  }

  ngOnInit() {
    this.toggle();
  }

}

app-sidenav.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { AppSidenavRoutingModule } from './app-sidenav-routing.module';
import { AppSidenavComponent } from './app-sidenav.component';
import { AppSidenavService } from './app-sidenav.service';

import  { MatSidenavModule } from '@angular/material';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { APP_SIDENAV_IMPORTS } from './app-sidenav.component.spec';

@NgModule({
  imports: APP_SIDENAV_IMPORTS,
  exports : [
    AppSidenavComponent
  ],
  declarations: [AppSidenavComponent],
  providers: [AppSidenavService]
})
export class AppSidenavModule { }

app.module.ts

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

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

import { AppComponent } from './app.component';
import { AppNewFeaturesComponent } from './app/app-new-features.component';

import { PageNotFoundComponent } from './page-not-found.component';

@NgModule({
  declarations: [
    AppComponent,
    PageNotFoundComponent,
    AppNewFeaturesComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
  ]

})
export class AppModule { }

编辑 当我使用this technique（修改compiler.js 文件，修改_loadModules 函数，在加载模块时打印模块）时，我得到如下输出（注意BrowserAnimationsModule 是列出的模块之一！和但我仍然有错误）：

RootScopeModule
CommonModule
    NgClass
    NgComponentOutlet
    ...
ApplicationModule
BrowserModule
BrowserTestingModule
BrowserDynamicTestingModule
BrowserAnimationsModule
RouterModule
    RouterOutlet
    RouterLink
    ...
AppSidenavRoutingModule
BidiModule
    Dir
MatCommonModule
PlatformModule
ScrollingModule
    CdkFixedSizeVirtualScroll
    CdkScrollable
    ...
MatSidenavModule
    MatDrawer
    MatDrawerContainer
    ...
PanelBarModule
    PanelBarComponent
    PanelBarItemComponent
    ...
...
DynamicTestModule
    AppSidenavComponent
providers
   AppSidenavService
   TestBedViewEngine
   The presence of this token marks an injector as being the root injector.

Answer 1

自发布问题以来，我进行了重大更改，现在我的单元测试效果更好。 以下是一些相关的变化：

• 将 Angular 从版本 8 升级到版本 13
• 所以我升级了所有核心组件，例如@angular/core、@angular/cli
• 我升级了我必须使用的所有关键库，包括 @angular/material 和 @progress（又名 KendoUI）
• 在运行测试时，为传递给构建器的styles 选项使用空数组