Erro "No provider for HttpClient" no Angular: 5 soluções 2025

«No provider for HttpClient» — o erro que irrita todo mundo

Você está escrevendo um serviço no Angular, injeta o HttpClient no construtor, executa a aplicação... E de repente — puf! O console do navegador fica vermelho: NullInjectorError: No provider for HttpClient. Familiar?

Esse erro é um verdadeiro "rito de passagem" para todo desenvolvedor Angular. No Stack Overflow, ele já foi discutido mais de 400 mil vezes, e em 2025 continua pegando iniciantes e veteranos. Mas a boa notícia é: a solução existe, e não é só uma.

Neste artigo, vamos explorar 5 melhores práticas para vencer o No provider for HttpClient no Angular 18+ e TypeScript. Vamos nessa!

Por que o erro «No provider for HttpClient» acontece?

A essência do erro é simples: o Angular não sabe como criar uma instância do HttpClient. O Angular usa injeção de dependência (DI) — um contêiner que gerencia a criação de objetos. Se você pediu o HttpClient, mas o contêiner DI não tem a "receita" para construí-lo — o erro aparece.

Situação clássica:

import { Injectable } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\n\n@Injectable({ providedIn: 'root' })\nexport class DataService {\n  constructor(private http: HttpClient) {} // ❌ Erro: No provider for HttpClient\n}\n

O Angular diz: "Vejo que você quer o HttpClient, mas não sei onde encontrá-lo". E faz sentido — esquecemos de importar o módulo ou provider que registra o HttpClient no contêiner DI.

Melhores práticas 2025: 5 maneiras de corrigir o erro

1. Clássico: HttpClientModule (Angular até a versão 17)

A maneira mais antiga e testada é importar o HttpClientModule no módulo raiz da aplicação.

// app.module.ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { HttpClientModule } from '@angular/common/http';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    BrowserModule,\n    HttpClientModule // ✅ O salvador da pátria\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n

Esse método funciona no Angular 2–17. Em 2025, ainda é relevante se você estiver usando a arquitetura baseada em NgModule. Desvantagem: importa o módulo inteiro do HttpClient, mesmo que você precise apenas da funcionalidade básica.

2. Padrão moderno: provideHttpClient() (Angular 15+)

Com a chegada dos standalone components, o Angular migrou para providers funcionais. Agora, em vez de um módulo, você usa a função provideHttpClient.

// main.ts (bootstrap standalone)\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { provideHttpClient } from '@angular/common/http';\nimport { AppComponent } from './app/app.component';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideHttpClient() // ✅ Registrando o HttpClient\n  ]\n}).catch(err => console.error(err));\n

Esta é a forma recomendada no Angular 18+ e em 2025. É mais leve, mais rápida e não carrega código desnecessário. Se você está criando uma aplicação nova, use esta abordagem.

3. Avançado: provideHttpClient() com withFetch()

A partir do Angular 17, surgiu a possibilidade de usar a fetch API em vez do XMLHttpRequest. Isso traz ganhos de performance e suporte a recursos modernos (como streaming).

import { bootstrapApplication } from '@angular/platform-browser';\nimport { provideHttpClient, withFetch } from '@angular/common/http';\nimport { AppComponent } from './app/app.component';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideHttpClient(\n      withFetch() // ✅ Ativando a Fetch API\n    )\n  ]\n}).catch(err => console.error(err));\n

Isso é especialmente útil para aplicações que fazem muitas requisições e precisam de melhor desempenho. Lembre-se: a fetch API é suportada por todos os navegadores modernos em 2025.

4. Para módulos de funcionalidade: HttpClientModule em módulos filhos

Se você está usando uma arquitetura de módulos e precisa do HttpClient apenas em um módulo específico (como um módulo de funcionalidade), você pode importá-lo localmente.

// modules/admin/admin.module.ts\nimport { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { HttpClientModule } from '@angular/common/http';\nimport { AdminComponent } from './admin.component';\nimport { AdminService } from './admin.service';\n\n@NgModule({\n  declarations: [AdminComponent],\n  imports: [\n    CommonModule,\n    HttpClientModule // ✅ HttpClient disponível apenas neste módulo\n  ],\n  providers: [AdminService]\n})\nexport class AdminModule { }\n

Essa abordagem é útil para manter o escopo do HttpClient restrito, evitando importações desnecessárias em toda a aplicação.

5. Solução de emergência: provideHttpClient() em componentes standalone

Se você está com pressa e precisa do HttpClient apenas em um componente específico (não recomendado para produção, mas útil para testes rápidos), você pode fornecê-lo diretamente no componente.

// components/dashboard/dashboard.component.ts\nimport { Component } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  selector: 'app-dashboard',\n  standalone: true,\n  imports: [CommonModule],\n  providers: [HttpClient], // ✅ Provider direto no componente\n  template: `...`\n})\nexport class DashboardComponent {\n  constructor(private http: HttpClient) { }\n}\n

Atenção: Isso cria uma nova instância do HttpClient para cada componente, o que pode causar problemas de performance e memory leak. Use apenas em cenários muito específicos.

Resumo: qual método escolher em 2025?

Aqui vai um guia rápido para você decidir:

\n
• Projeto novo com standalone components: use provideHttpClient() no bootstrap — é o padrão moderno e mais eficiente.
\n
• Projeto legado com NgModules: mantenha o HttpClientModule no módulo raiz — funciona perfeitamente.
\n
• Precisa de performance extra: adicione withFetch() ao provideHttpClient() para usar a Fetch API.
\n
• Testes rápidos ou protótipos: use o provider direto no componente, mas lembre-se de refatorar depois.
\n

Com essas 5 soluções, você nunca mais vai se assustar com o erro "No provider for HttpClient". Escolha a que melhor se adapta ao seu projeto e siga codando!