import { APP_INITIALIZER, EnvironmentProviders, FactoryProvider, Injector, makeEnvironmentProviders, } from '@angular/core'; import { AngularRenderer } from '@storybook/angular'; import { DecoratorFunction } from '@storybook/types'; type AngularStorybookDecorator = DecoratorFunction< AngularRenderer, TArgs >; type StoryFnAngularReturnType = ReturnType; function provideInjectorProp( story: StoryFnAngularReturnType ): EnvironmentProviders { function initializeStory(injector: Injector): () => void { return () => { story.props = { injector, ...story.props, }; }; } const storyInitializer: FactoryProvider = { provide: APP_INITIALIZER, multi: true, useFactory: initializeStory, deps: [Injector], }; return makeEnvironmentProviders([storyInitializer]); } /** * Add `injector` to passed props. * * @see https://jgelin.medium.com/inject-angular-services-in-storybook-7-c26b7f5a41e5 by Jonathan Gelin */ export function withInjectorProp(): DecoratorFunction< AngularRenderer, TArgs > { return storyFn => { const story = storyFn(); story.applicationConfig ??= { providers: [] }; story.applicationConfig.providers = [ provideInjectorProp(story), ...story.applicationConfig.providers, ]; return story; }; }