[SOLVED] Angular stackblitz Error: Uncaught (in promise): Error: Providers from the `BrowserModule` have already been loaded

Angular stackblitz Error: Uncaught (in promise): Error: Providers from the `BrowserModule` have already been loaded

I have something working locally on my computer that I can't get working in StackBlitz:

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.

https://stackblitz.com/edit/angular-x6gagz?file=src/main.ts

I'm only importing BrowserModule here:

import { bootstrapApplication, BrowserModule } from '@angular/platform-browser';
import { ParentComponent } from './components/parent/parent.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [ParentComponent, BrowserModule, BrowserAnimationsModule],
  template: `
    <app-parent></app-parent>
  `,
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App);

Can anyone fix this for me?

Solution

To use animations in an Angular standalone application, we need to provide them in the providers array of bootstrapApplication

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

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

Forked Example