How to add BrowserAnimationsModule or NoopAnimationsModule to Standalone Component?

user_12348584 0
Viewed 443

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).
angular14 angular
3 Answers

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.

bootstrapApplication(AppComponent, {
    providers: [
      provideAnimations()
    ]
 })
user_77903760

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

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,
        ],
      },
    }
  )
user_68034630
Related