Error: NG05105: Unexpected synthetic listener @transform.start found

Question

My Angular 17 application with Angular Material throws an error when I run ng test:

Chrome 121.0.0.0 (Linux x86_64) AppComponent should have the 'app-test' title FAILED
        Error: NG05105: Unexpected synthetic listener @transform.start found. Please make sure that:
          - Either `BrowserAnimationsModule` or `NoopAnimationsModule` are imported in your application.
          - There is corresponding configuration for the animation named `@transform.start` defined in the `animations` field of the `@Component` decorator (see https://angular.io/api/core/Component#animations).
        error properties: Object({ code: 5105 })
            at checkNoSyntheticProp (node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:690:15)
            at NoneEncapsulationDomRenderer.listen (node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:652:13)
            at listenerInternal (node_modules/@angular/core/fesm2022/core.mjs:24662:40)
            at Module.ɵɵsyntheticHostListener (node_modules/@angular/core/fesm2022/core.mjs:24573:5)
            at superHostBindings (node_modules/@angular/material/fesm2022/sidenav.mjs:74:110)
            at Object.hostBindings (node_modules/@angular/core/fesm2022/core.mjs:15937:13)
            at invokeHostBindingsInCreationMode (node_modules/@angular/core/fesm2022/core.mjs:12939:13)
            at invokeDirectivesHostBindings (node_modules/@angular/core/fesm2022/core.mjs:12922:17)
            at createDirectivesInstances (node_modules/@angular/core/fesm2022/core.mjs:12300:9)
            at ɵɵelementStart (node_modules/@angular/core/fesm2022/core.mjs:22153:9)
Chrome 121.0.0.0 (Linux x86_64) AppComponent should render title FAILED
        Error: NG05105: Unexpected synthetic listener @transform.start found. Please make sure that:
          - Either `BrowserAnimationsModule` or `NoopAnimationsModule` are imported in your application.
          - There is corresponding configuration for the animation named `@transform.start` defined in the `animations` field of the `@Component` d```

Bronchiole

Answer 1

The error is a bit deceptive. I have animations imported, but the animations are not "provided" in the tests so provide them with provideAnimations:

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

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

describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [AppComponent],
      providers: [provideAnimations()]        // <--- 
    }).compileComponents();
  });

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });

Bronchiole

Answer 2

I managed to solve it by adding the provideAnimations function to the appConfig provider.

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideAnimations()]
};

Impoverished

Answer 3

I had similar problem.

By me the proposal of @jan-nielson didn't worked. I compared the tests from https://angular.io/guide/testing-components-basics and my tests and found out some workaround.

FYI: You can start the application in StackBlitz: https://angular.io/generated/live-examples/testing/stackblitz.html

After compiling run in StackBlitz's terminal

ng test 

and see the results.

Ruppert