How to use animations in an angular standalone component

Question

I'm trying to setup an angular project, standalone component + 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);

DEMO

However, I get the following error

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

Without animations (without BrowserAnimationsModule) it works. But as soon as I want to use animations, I have to import BrowserAnimationsModule and it all breaks. Any suggestions?

Answer 1

you need add as provider provideAnimations

bootstrapApplication(App, {
  providers: [
    provideAnimations()
]});

not import BrowserAnimationsModule

NOTE: I'm not pretty sure about your animation, An e.g. (see that is about the "divs in the *ngFor"

  template: `
  <div >
    <div [@stagger] *ngFor="let item of items; trackBy:identify">{{ item.value }}</div>
  </div><button (click)="onClick()">Update</button>`,
  animations: [
    trigger('stagger',[
      transition(':enter', [
        style({ opacity: 0 }),
        animate('100ms', style({ opacity: 1 })),
      ]),
      transition(':leave', [
        animate('100ms', style({ opacity: 0 }))
      ])
    ])
  ],

Your forked stackblitz

NOTE2: there're some providers we can declare when we work with standalone component if was necessary. See this link about configure Angular enviroment