[Bug]: Angular: Unable to override Component Providers

[yharaskrik]

Describe the bug

If providing providers at the component level they cannot be overridden by the moduleMetaData({ providers: [] }) option.

To Reproduce

https://stackblitz.com/edit/github-tgnemy?file=src%2Fstories%2Fbutton.component.ts,src%2Fstories%2FButton.stories.ts&preset=node

System

~/projects/github-tgnemy
❯ npx storybook@latest info

Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    @storybook/addon-essentials: ^7.1.0-alpha.11 => 7.1.0-alpha.11 
    @storybook/addon-interactions: ^7.1.0-alpha.11 => 7.1.0-alpha.11 
    @storybook/addon-links: ^7.1.0-alpha.11 => 7.1.0-alpha.11 
    @storybook/angular: ^7.1.0-alpha.11 => 7.1.0-alpha.11 
    @storybook/blocks: ^7.1.0-alpha.11 => 7.1.0-alpha.11 
    @storybook/testing-library: ^0.0.14-next.2 => 0.0.14-next.2 

### Additional context

_No response_

[shilman]

@valentinpalkovic is this a dupe to #22290 #22282 ?

[valentinpalkovic]

@shilman Might be coupled to https://github.com/storybookjs/storybook/issues/22290 but I have to investigate.

[samvloeberghs]

Hi, this makes using Storybook with Angular that use component level providers impossible for many scenarios.. Can I kindly ask to increase the severity of this bug? Thanks!

Typical example: A top level component in a feature library that provides a data service at the component level. This data service is responsible for fetching data from a backend. In the Storybook runtime, the service should be mocked so that example data can be returned instead of calling the actual backend. The service is provided at the component level and not the root or route level because the service needs to be destroyed/gced at when the component is destroyed.

[valentinpalkovic]

I hear your concerns!

Unfortunately, this is a current limitation of Storybooks and Angular's API. For testing purposes, you usually use the TestBed API to mock component services in unit tests. The test functions for mocking cannot be used in the browser though. This means, we need to somehow provide an API and test functions, which work like the TestBed functions, except that it runs in the browser, too. This needs further investigation and would also require a complete redesign of the Angular renderer integration in Storybook, though.

I don't say this is impossible. I try to free some time to investigate putting together a new set of Storybook composition functions, which would make it possible to manipulate the metadata completely, which is attached to a Angular component.

The current approach is to inject a middleman Ngmodule, which will be set up with all the provided services. Overwriting a components service is not possible via this approach, since the DI order cannot be manipulated. The component's service has a higher priority than the service, which gets injected higher up via an Angular Ngmodule.

[jase88]

So no workaround possible without moving from standalone components to modules? :(

[valentinpalkovic]

Not yet. But we are working on a solution to support this use case in the future

[jase88]

@valentinpalkovic will this land in storybook 8?

[valentinpalkovic]

Unfortunately it's not planned in for 8.0, but might be part of a follow up 8.x release.

[RazeiXello]

So no workaround possible without moving from standalone components to modules? :(

Not yet. But we are working on a solution to support this use case in the future

Hi @valentinpalkovic! I recently implemented Storybook for one of our Angular applications and only just encountered this, and was puzzled for a few hours until I found this issue.

Has there been any progress on this? Especially since standalone components will be the default setting for components in Angular v19.

[DPros]

I've encountered this issue as well, and I must say it's an unfortunate blocker for moving towards standalone components and avoiding boilerplate code