26

When I add either a BrowserAnimationsModule or a NoopAnimationsModule to the imports array of my Standalone AppComponent, it breaks the application.

@Component({
  standalone: true,
  imports: [
    CommonModule,
    NoopAnimationsModule,
    /* ... */
  ],
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

These are the errors I'm getting when I add any of them:

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.

And when I don't add it, I get this error:

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).
H3AR7B3A7
  • 4,366
  • 2
  • 14
  • 37

3 Answers3

42

The importProvidersFrom function provides a bridge back to the NgModule world. It should not be used in component provide as it is only usable in an application injector

Add importProvidersFrom function to provide BrowserAnimationModule inside main.ts.

main.ts

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

Forked Example

Update 14.1.0-rc.0 (2022-07-13)

Angular new versions provide two new function provideAnimations() and provideNoopAnimations() to enable and disable animation. we could use it like this.

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

    bootstrapApplication(AppComponent, {
        providers: [
          provideAnimations()
        ]
     })
Chellappan வ
  • 23,645
  • 3
  • 29
  • 60
  • 3
    Also good to mention that needs to be imported from here: import { provideAnimations } from '@angular/platform-browser/animations' – Marco Martins May 11 '23 at 10:22
  • @MarcoMartins Thank you for that. I think it should be a requirement to include imports in code samples. Far too often they are left off, and while they may be obvious they are not always so. Best practice, always include them. :) – crowmagnumb Aug 01 '23 at 19:39
  • exactly what I was looking for-thank you – zobidafly Aug 07 '23 at 11:30
7

Just found out that importProvidersFrom should only be used once.

Wrong:

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

Correct:

bootstrapApplication(AppComponent,{
  providers:[
    importProvidersFrom([BrowserModule, BrowserAnimationsModule])
  ]
});
Oliver Schlegel
  • 71
  • 1
  • 2
0

I have faced the same problem. I fixed it by overrideComponent in my TestBed and just omitting the Module.

.overrideComponent(
    CourseComponent,
    // since you cannot simply ovveride services that have been injected into Angular Component's
    // providers https://angular.io/guide/testing-components-scenarios#override-component-providers
    {
      set: {
        providers: [
          { provide: CourseService, useValue: courseServiceMock },
        ],
        imports: [
          CommonModule,
          ReactiveFormsModule,
          // BrowserAnimationsModule, -- this cause error related to standalone components API therefore turned off
          MatButtonModule,
          MatInputModule,
          MatIconModule,
          MatDividerModule,
          MatCardModule,
        ],
      },
    }
  )
Danylo Bilokha
  • 11
  • 1
  • 5