AnimationBuilder not loading in storybook for kendo-autocomplete

Question

I am trying to create a reusable wrapper component around kendo-autocomplete and display it in storybook.

For simplicity I am making the component wrapper a standalone component in angular.

This appears to load just fine in storybook, but when I try to type in the kendo autocomplete textbox, I get this error:

ERROR NullInjectorError: R3InjectorError(Standalone[StorybookWrapperComponent])[AnimationBuilder -> AnimationBuilder -> AnimationBuilder]: 
  NullInjectorError: No provider for AnimationBuilder!

If I try to add AnimationBuilder to the provider or imports array, I get this error:

Type 'typeof AnimationBuilder' is not assignable to type 'Provider'.
  Type 'typeof AnimationBuilder' is not assignable to type 'TypeProvider'.
    Cannot assign an abstract constructor type to a non-abstract constructor type.

Here are the files I am working with:

input-dropdown.component.ts

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-input-dropdown',
  templateUrl: './input-dropdown.component.html',
  styleUrls: ['./input-dropdown.component.scss']
})

export class InputDropdownComponent {
  private _data: Array<string>;
  private _model: any;
  private _id: string;
  public set data(newData: any) {
    this._data = newData;
  }

  @Input()
  public get data(): any {
    return this._data;
  }

  public set id(newId: string) {
    this._id = newId;
  }

  @Input()
  public get id(): any {
    return this._id;
  }

  public set model(newModel: any) {
    this._model = newModel;
    this.onModelChange();
  }
  @Input()
  public get model(): any {
    return this._model;
  }

  @Input() public valueField: string;
  @Input() public isLoading: boolean;
  @Output() public modelChangeEvt: EventEmitter<any> = new EventEmitter<any>();
  constructor() { }
  ngOnInit() {
    console.log('this is loaded')
  }

  public onModelChange(): void {
    this.modelChangeEvt.emit(this.model);
  }

  public inputChange(value: string): void {
    this.model = value;
  }
}

input-dropdown.component.html

<kendo-dropdownlist [(ngModel)]="model" [data]="data" id="id">
  <ng-template kendoAutoCompleteNoDataTemplate>
    <app-loading [size]="'80px'" *ngIf="isLoading"></app-loading>
  </ng-template>
</kendo-dropdownlist>

InputDropdown.stories.ts

import { FormsModule } from '@angular/forms';
import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
import { InputDropdownComponent } from 'src/app/shared/components/input-dropdown/input-dropdown.component';
import { SharedModule } from 'src/app/shared/shared.module';
const meta: Meta<InputDropdownComponent> = {
    title: 'common-component/input-dropdown',
    component: InputDropdownComponent,
    tags: ['autodocs'],
    decorators: [
        moduleMetadata({
            imports: [FormsModule, SharedModule],
        }),
    ],
    render: (args: InputDropdownComponent) => ({
        props: {
            ...args,
        },
    }),
    argTypes: {
    },
};

export default meta;
type Story = StoryObj<InputDropdownComponent>;

const form = { testModelProperty: 'test' };

export const Primary: Story = {
    args: {
        model: form.testModelProperty,
        data: ['Option 1', 'Option 2'],
        isLoading: false,
    },
};

Answer 1

In your story try to import all your module and BrowserAnimationsModule

const meta: Meta<InputTextComponent> = {
    title: 'common-component/input-text',
    component: InputTextComponent,
    tags: ['autodocs'],
    decorators: [
       moduleMetadata({
         imports: [AutoCompleteModule, FormsModule, BrowserAnimationsModule],
       }),
    ],
    render: (args: InputTextComponent) => ({
        props: {
            ...args,
        },
    }),
    argTypes: {
    },
};