Angular独立组件导入BrowserAnimationsModule使用动画报错求助

错误原因 #

BrowserAnimationsModule 内部依赖并导入了 BrowserModule，而使用 bootstrapApplication 启动独立组件时，Angular 已经默认加载了 BrowserModule 的提供者，重复导入就会触发这个冲突错误。

修复步骤 #

1. 移除组件中的 BrowserAnimationsModule 导入
   独立组件不需要直接导入该模块，动画支持通过依赖注入的方式提供即可。

2. 在 bootstrapApplication 中配置动画提供者
   导入 @angular/platform-browser/animations 中的 provideAnimations() 函数，将其添加到启动配置的 providers 数组中。

修改后的完整代码 #

import { Component, trigger, transition, query, style, stagger, animate } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideAnimations } from '@angular/platform-browser/animations';

@Component({
    selector: 'my-app',
    standalone: true,
    imports: [CommonModule], // 移除BrowserAnimationsModule
    template: `
        <div [@stagger]>
            <div *ngFor="let item of items; trackBy:identify">{{ item.value }}</div>
        </div>
        <button (click)="onClick()">Update</button>`,
    animations: [
        trigger('stagger', [
            transition('* => *', [
                query(
                   ':enter',
                   [
                       style({ opacity: 0 }),
                       stagger(100, [animate('0.5s', style({ opacity: 1 }))]),
                   ],
                   { optional: true }
                ),
            ]),
        ]),
    ],
})
export class App {
   items = [{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }];

   onClick() {
        this.items = [...this.items, { value: 99 }];
   }
   identify(index, item) {
       return item.value;
   }
}

// 添加动画提供者到启动配置
bootstrapApplication(App, {
  providers: [provideAnimations()]
});

补充说明 #

• 若需禁用动画（如测试环境），可将 provideAnimations() 替换为 provideNoopAnimations()
• 独立组件模式下，模块级别的提供者需通过 bootstrapApplication 的配置传入，而非在组件 imports 中导入含提供者的模块，以此避免重复加载冲突。

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