Storybook-angular error - Type 'EnvironmentProviders' is not assignable to type 'Provider'

Question

after upgrading storybook from 6.5 to version 7.0.23 with angular 16 I met this error:

Type 'EnvironmentProviders' is not assignable to type 'Provider'

Currently found that docs are changed, and providers should be in applicationConfig

const meta: Meta = {
  title: 'Example',
  component: ExampleComponent,
  decorators: [
    // Define application-wide providers with the applicationConfig decorator
    applicationConfig({
      providers: [
        importProvidersFrom(BrowserAnimationsModule),
        // Extract all providers (and nested ones) from a ModuleWithProviders
        importProvidersFrom(SomeOtherModule.forRoot()),
      ],
    }
  ],
};

But it does not make effect to fix this error.

Any ideas?

Answer 1

The config works, but also we need to delete the component property from the Storybook object. It is deprecated, but not so obvious that it will broke the build, also it is not highlighted as deprecated unfortunately. more info https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#angular-removed-deprecated-component-and-propsmeta-field