AnimationBuilder 未在故事书中加载剑道自动完成功能

Question

我正在尝试围绕

kendo-autocomplete

创建一个可重用的包装组件并将其显示在故事书中。

为了简单起见，我将组件包装器设置为 Angular 中的独立组件。

这似乎在故事书中加载得很好，但是当我尝试在剑道自动完成文本框中键入时，我收到此错误：

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

如果我尝试将

AnimationBuilder

添加到

provider

或

imports

数组，我会收到此错误：

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.

以下是我正在使用的文件：

input-text.component.ts

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AutoCompleteModule } from '@progress/kendo-angular-dropdowns';

@Component({
  standalone: true,
  selector: 'app-input-text',
  imports: [AutoCompleteModule, FormsModule,],
  providers: [],
  templateUrl: './input-text.component.html',
  styleUrls: ['./input-text.component.scss'],
})
export class InputTextComponent {
  aircraftType = '';
  aircrafts = ['aircraft1', 'aircraft2', 'aircraft3'];
  onValueChange() {
    console.log();
  }
}

input-text.component.html

<div class="field AC-type">
  <label for="acTyeAutoComplete">A/C Type</label>
  <kendo-autocomplete
    class="AC-autocomplete"
    id="acTyeAutoComplete"
    [(ngModel)]="aircraftType"
    [data]="aircrafts"
    [valueField]="'customAircraftType'"
    [filterable]="true"
    (valueChange)="onValueChange()"
  >
  </kendo-autocomplete>
</div>

InputText.stories.ts

import type { Meta, StoryObj } from '@storybook/angular';
import { InputTextComponent } from 'src/app/common-component/input-text/input-text.component';
// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
const meta: Meta<InputTextComponent> = {
    title: 'common-component/input-text',
    component: InputTextComponent,
    tags: ['autodocs'],
    render: (args: InputTextComponent) => ({
        props: {
            ...args,
        },
    }),
    argTypes: {
    },
};

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

export const Primary: Story = {
    args: {

    },
};

Answer 1

在你的故事中尝试导入所有模块

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