try 测试具有Angular material 下拉列表的组件时，在Angular 17中发现&q；错误的意外合成属性@TransitionMessages

我的应用程序运行得很好.我的应用程序是独立的组件应用程序.当我try 测试组件时，我得到了Karma中标题中提到的错误.

导入我的组件

import { Component } from '@angular/core';
import {MatSelectModule} from '@angular/material/select';
import {MatFormFieldModule} from '@angular/material/form-field';
import { NavigationComponent } from '../../../0_navigation/navigation.component';
import jsonDataShipments from '../../../../../assets/shipments.json';

@Component({
  selector: 'app-sort-functionality',
  standalone: true,
  imports: [NavigationComponent, MatFormFieldModule, MatSelectModule],
  templateUrl: './sort-functionality.component.html',
  styleUrl: './sort-functionality.component.css'
})

我的应用程序的配置

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

import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

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

误差率

误差率: NG05105: Unexpected synthetic property @transitionMessages found. Please make sure that:
  - Either `BrowserAnimationsModule` or `NoopAnimationsModule` are imported in your application.
  - There is corresponding configuration for the animation named `@transitionMessages` defined in the `animations` field of the `@Component` decorator (see https://angular.io/api/core/Component#animations).

如果我导入BrowserAnimationsModule

我得到了这个错误

Uncaught (in promise): 误差率: Providers from the `BrowserModule` have already been loaded. If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead.
误差率: Providers from the `BrowserModule` have already been loaded. If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead.