尝试使用角度材料的下拉菜单测试组件时，角度 17 中出现“意外的合成属性 @transitionMessages 发现”错误

Question

我的应用程序运行良好。当我尝试测试该组件时，出现标题中提到的错误。

导入我的组件

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(),
  ],
};

错误

Error: 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): Error: Providers from the `BrowserModule` have already been loaded. If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead.
Error: Providers from the `BrowserModule` have already been loaded. If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead.

Answer 1

BrowserAnimationsModule 只能在应用程序的根模块中加载一次。

记录在这里： https://angular.io/guide/animations#getting-started