如何将 BrowserAnimationsModule 或 NoopAnimationsModule 添加到独立组件？

Question

当我将 BrowserAnimationsModule 或 NoopAnimationsModule 添加到独立 AppComponent 的导入数组时，它会破坏应用程序。

@Component({
  standalone: true,
  imports: [
    CommonModule,
    NoopAnimationsModule,
    /* ... */
  ],
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

这些是我在添加其中任何一个时遇到的错误：

ERROR Error: 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.

当我不添加它时，我得到这个错误：

ERROR Error: 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).

Answer 1

importProvidersFrom 函数提供了回到 NgModule 世界的桥梁。它不应该在组件提供中使用，因为它只能在应用程序注入器中使用

添加importProvidersFrom函数，在main.ts中提供BrowserAnimationModule。

ma​​in.ts

bootstrapApplication(AppComponent,{
  providers:[importProvidersFrom(BrowserAnimationsModule)]
}); 

Forked Example