Angular12出现Unexpected synthetic property @flyInOut错误如何解决

报错信息：
Error: Unexpected synthetic property @flyInOut found. Please make sure that:
需在你的应用中导入BrowserAnimationsModule或NoopAnimationsModule模块。

从你提供的package.json配置可以确认，你已经安装了版本匹配的@angular/animations依赖，无需额外安装npm包，按以下步骤操作即可修复：

• 步骤1：在项目根模块app.module.ts中导入动画模块

// 模块顶部新增导入
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// 若不需要动画效果，仅需消除报错，可替换导入无动画实现的模块
// import { NoopAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    // 你的项目组件列表
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // 添加到imports数组中，不需要动画就替换为NoopAnimationsModule
    // 其余你已导入的模块，比如FormsModule、RouterModule、NgxToastrModule等
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 步骤2：如果@flyInOut动画仅在特定子功能模块中使用，也可选择仅在对应子模块的imports数组中添加动画模块，无需全局导入
• 额外说明：你项目中引入的ngx-toastr组件库也依赖Angular动画模块，导入后也可同步解决toast提示的动画相关报错

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