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

Question

当我将 aBrowserAnimationsModule或 a添加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。

主要.ts

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

分叉示例

更新 Angular 14+

Angular新版本提供了两个新函数provideAnimations()和provideNoopAnimations()来启用和禁用动画。我们可以这样使用它。

    import { provideAnimations } from '@angular/platform-browser/animations';

    bootstrapApplication(AppComponent, {
        providers: [
          provideAnimations()
        ]
     })

文档链接

Answer 2

刚刚发现 importProvidersFrom 只能使用一次。

错误的：

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

正确的：

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