Как внедрить сервисы в компоненты angular storybook?

Question

Github: https://github.com/danielhdz56/storybook-demo.git

Внедрение службы в компонент всегда вызывает ошибку в сборнике рассказов:

Error: Can't resolve all parameters for CustomService: (?).

пример компонента:

 @Component({
   selector: 'app-custom-selector',
   templateUrl: './custom-selector.component.html',
   styleUrls: ['./custom-selector.component.scss'],
 })
 export class NavigationItemComponent {
   constructor(private customService: CustomService) {}
 }

Answer 1

Вам нужно добавить их в метаданные модуля

const modules = {
    imports: [..],
    providers: [CustomService],
    declarations: [NavigationItemComponent ]
};

// Then in stories: 
.add('description',
    () => ({
        component: NavigationItemComponent ,
        props: {...},
        moduleMetadata: modules
    }
)

Answer 2

Я решил это, используя собственный фабричный инициализатор для необходимой службы, когда не использовал дополнительный хост-компонент с помощьюAPP_INITIALIZERот@angular/core:

      import { APP_INITIALIZER } from '@angular/core';

function myServiceFactory(myService: MyService) {
  return () => myService;
}

const meta: Meta<MyCustomComponent> = {
  title: 'Components/Custom component',
  component: MyCustomComponent,
  argTypes: {
  },
  decorators: [
    moduleMetadata({
      imports: [
        BrowserAnimationsModule,
        BrowserModule,
        CommonModule,
      ],
      providers: [
        provide: APP_INITIALIZER,
        useFactory: myServiceFactory,
        deps: [MyService],
      ]
    }),
  ],
};