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?
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()]
});