[Bug]: Getting Error NG0201: No provider found for `HttpClient`

[ankurdeal]

Describe the bug

I'm using angular 20.2.4 and storybook 9.1.4. I have removed appModule and generated app.config.ts file while upgrading. I have one component which is not a standalone component and use httpclient service. When I'll use this compeonent in storybook stories I'm getting error like No provider found for HTTPClient. I have tried with different approach but it's still showing me error. What is the possible way I can do that will resolve my above error.

Reproduction link

Getting error with stackblitz generation will add soon

Reproduction steps

No response

System

Storybook Environment Info:
(node:9948) [DEP0190] DeprecationWarning: Passing args to a child process with shell option true can lead to security vulnerabilities, as the arguments are not escaped, only concatenated.
(Use `node --trace-deprecation ...` to show where the warning was created)

  System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
  Binaries:
    Node: 24.7.0 - C:\Program Files\nodejs\node.EXE
    npm: 11.5.1 - C:\Program Files\nodejs\npm.CMD <----- active
  Browsers:
    Edge: Chromium (139.0.3405.125)
  npmPackages:
    @storybook/addon-docs: 9.1.4 => 9.1.4
    @storybook/addon-links: ^9.1.4 => 9.1.4
    @storybook/angular: ^9.1.4 => 9.1.4
    chromatic: ^6.8.0 => 6.24.1
    storybook: ^9.1.4 => 9.1.4

Additional context

No response

[dosubot]

Hi @ankurdeal! I'm Dosu and I’m helping the storybook team.

The error happens because Angular's HttpClient service requires HttpClientModule to be provided in the dependency injection tree. In Storybook, for non-standalone components (those still using NgModule), you need to explicitly provide this module in your stories.

For your scenario (Angular 20+, non-standalone component), use the moduleMetadata decorator in your story file to import HttpClientModule. Here’s a copy-paste example:

import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
import { HttpClientModule } from '@angular/common/http';
import { YourComponent } from './your.component';

const meta: Meta<YourComponent> = {
  component: YourComponent,
  decorators: [
    moduleMetadata({
      imports: [HttpClientModule],
      // declarations: [...], // add if your component uses other directives/pipes
      // providers: [...],    // add if you need to provide custom services/mocks
    }),
  ],
};
export default meta;

type Story = StoryObj<YourComponent>;

export const Default: Story = {};

This ensures HttpClient is available for your component and its dependencies in Storybook. You can apply moduleMetadata globally (as above) or per story if needed. This is the recommended approach for non-standalone components in Angular 20+ projects using Storybook 9.x [docs].

If you ever migrate your component to standalone, you can use the applicationConfig decorator with importProvidersFrom(HttpClientModule) instead [docs].

If the error persists, double-check that your component is not marked as standalone, that you’re importing from @angular/common/http, and that there are no typos in your imports or providers. If you still see issues, sharing a minimal reproduction will help with further troubleshooting.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[ankurdeal]

@dosu

Hi @ankurdeal! I'm Dosu and I’m helping the storybook team.

The error happens because Angular's HttpClient service requires HttpClientModule to be provided in the dependency injection tree. In Storybook, for non-standalone components (those still using NgModule), you need to explicitly provide this module in your stories.

For your scenario (Angular 20+, non-standalone component), use the moduleMetadata decorator in your story file to import HttpClientModule. Here’s a copy-paste example:

import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
import { HttpClientModule } from '@angular/common/http';
import { YourComponent } from './your.component';

const meta: Meta = {
component: YourComponent,
decorators: [
moduleMetadata({
imports: [HttpClientModule],
// declarations: [...], // add if your component uses other directives/pipes
// providers: [...], // add if you need to provide custom services/mocks
}),
],
};
export default meta;

type Story = StoryObj;

export const Default: Story = {};
This ensures HttpClient is available for your component and its dependencies in Storybook. You can apply moduleMetadata globally (as above) or per story if needed. This is the recommended approach for non-standalone components in Angular 20+ projects using Storybook 9.x [docs].

If you ever migrate your component to standalone, you can use the applicationConfig decorator with importProvidersFrom(HttpClientModule) instead [docs].

If the error persists, double-check that your component is not marked as standalone, that you’re importing from @angular/common/http, and that there are no typos in your imports or providers. If you still see issues, sharing a minimal reproduction will help with further troubleshooting.

To reply, just mention @dosu.

How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other    

@dosu But the thing is that HTTPClientModule is deprecated in angular 20 so can we use that?

[dosubot]

Yes, you can still use HttpClientModule with moduleMetadata in Storybook for non-standalone Angular components, even though it's deprecated in Angular 20+. Deprecation means it's still available and works, but may be removed in a future Angular release. This is the documented and supported approach for now, so your Storybook stories will work as expected. For long-term compatibility, keep an eye on Angular release notes and plan to migrate your components to standalone and use applicationConfig with importProvidersFrom(HttpClientModule) when you can. Storybook Angular docs

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}