Angular 15出现@transitionMessages合成属性错误求助

错误信息 #

ROR Error: 发现意外的合成属性@transitionMessages。请确保：

1. 应用中已导入BrowserAnimationsModule或NoopAnimationsModule；
2. @Component装饰器的animations字段中已定义名为@transitionMessages的动画配置。

问题分析 #

你的AppModule中未导入Angular动画所需的核心模块，这是触发该错误的主要原因。

解决方案 #

步骤1：确保安装动画包（可选，Angular 15通常已预装） #

如果项目中没有@angular/animations依赖，执行以下命令安装：

npm install @angular/animations

步骤2：在AppModule中导入动画模块 #

修改app-module.ts，将BrowserAnimationsModule添加到imports数组中：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // 新增导入

@NgModule({
  declarations: [
    AppComponent,
    CategoriaComponent,
    ListaProdottiComponent,
    HomeComponent,
    InfoComponent,
  ],
  imports: [
    BrowserModule, 
    HttpClientModule, 
    MatToolbarModule, 
    MatFormFieldModule, 
    MatInputModule, 
    MatIconModule, 
    MatButtonToggleModule, 
    FormsModule, 
    MatGridListModule,
    AppRoutingModule,
    KeycloakAngularModule,
    BrowserAnimationsModule // 新增动画模块
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeKeycloak,
      multi: true,
      deps: [KeycloakService]
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

步骤3：检查动画定义（若仍报错） #

如果导入模块后错误依旧，检查使用@transitionMessages动画的组件，确保在组件装饰器的animations字段中定义了该动画：

import { trigger, transition, style, animate } from '@angular/animations';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  animations: [
    trigger('transitionMessages', [ // 定义动画触发器
      transition(':enter', [
        style({ opacity: 0 }),
        animate('300ms', style({ opacity: 1 }))
      ]),
      transition(':leave', [
        animate('300ms', style({ opacity: 0 }))
      ])
    ])
  ]
})
export class YourComponentComponent { }

你的原始代码 #

main.ts #

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

app-module.ts（修改前） #

@NgModule({
  declarations: [
    AppComponent,
    CategoriaComponent,
    ListaProdottiComponent,
    HomeComponent,
    InfoComponent,
  ],
  imports: [
    BrowserModule, HttpClientModule, MatToolbarModule, MatFormFieldModule, MatInputModule, MatIconModule, MatButtonToggleModule, FormsModule, MatGridListModule,
     AppRoutingModule,KeycloakAngularModule
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeKeycloak,
      multi: true,
      deps: [KeycloakService]
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

内容的提问来源于stack exchange，提问作者Pietro02