Angular: how to fix Error: NG03600: Angular detected that the `AnimationBuilder` was injected, but animation support was not enabled

Question

When I ran Angular unit test I got the following error many times:

Error: NG03600: Angular detected that the AnimationBuilder was injected, but animation support was not enabled. Please make sure that you enable animations in your application by calling provideAnimations() or provideAnimationsAsync() function.

What can be the cause of that, how can I fix that?

Answer 1

Try importing provideAnimations or provideAnimationsAsync on providers array.

Since the component under testing is using animations, angular depends on animations module as the error states.

  TestBed.configureTestingModule({
    // provide the component-under-test and dependent service
    providers: [
      ...
      provideAnimations(),
      ...
    ]
  });

For setting it globally, you can simply use a wrapper function that add this dynamically.

export const setConfigWrapper = (baseObject: any) => {
    if(baseObject?.providers?.length) {
        baseObject.providers.push(provideAnimations());
    } else {
        baseObject.providers = [provideAnimations()];
    }
    return baseObject;
}

Then you can use it like so.

  TestBed.configureTestingModule(setConfigWrapper({
    // provide the component-under-test and dependent service
    providers: [
      ...
      ...
    ]
  }));