Ошибка "No provider for HttpClient" в Angular: причины и исправление

Причина ошибки

Ошибка NullInjectorError: No provider for HttpClient! возникает, когда Angular не может найти провайдер для класса HttpClient в системе внедрения зависимостей (DI). Это классическая проблема для новичков: вы импортировали HttpClientModule в AppModule, но этого недостаточно, если модуль не зарегистрирован правильно. В вашем коде всё выглядит верно на первый взгляд, но давайте разберёмся глубже.

Решение

Проблема в том, что HttpClientModule должен быть импортирован только один раз в корневой модуль приложения (AppModule). Если вы используете Angular Standalone Components (начиная с Angular 14+) или если ваш AppModule не является корневым (например, если вы используете модульную архитектуру с ленивой загрузкой), то импорт может не сработать. Но в вашем случае, судя по коду, вы используете классический модульный подход, и импорт HttpClientModule в imports массиве должен работать.

Однако! Есть одна частая ошибка: вы могли случайно импортировать HttpClientModule в дочерний модуль, а не в корневой. Или, что ещё вероятнее, вы используете Standalone компоненты (например, если ваш компонент помечен как standalone: true). В таком случае HttpClient нужно импортировать через importProvidersFrom или напрямую в провайдерах компонента.

Правильный подход для классического модульного приложения (Angular до 14): Убедитесь, что ваш app.module.ts выглядит так (добавлен импорт HttpClientModule в imports):

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { DataService } from './data.service';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule  // обязательно здесь
  ],
  providers: [DataService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Для Standalone компонентов (Angular 14+): Если ваш компонент объявлен как standalone: true, вам нужно импортировать provideHttpClient() в провайдерах приложения. Вот как это делается в main.ts:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideHttpClient } from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [provideHttpClient()]
});

Для лениво загружаемых модулей: Если ваш сервис используется в дочернем модуле, который загружается лениво, вам нужно импортировать HttpClientModule в этот дочерний модуль отдельно, или использовать forRoot() паттерн. Но в простых приложениях достаточно импорта в корневой модуль.

Проверка решения

После исправления убедитесь, что:

• Вы не импортировали HttpClient напрямую в providers массиве (это не нужно).
• Ваш сервис использует providedIn: 'root' (как у вас в коде) — это автоматически делает его доступным во всём приложении.
• Перезапустите сервер разработки (ng serve), так как изменения в модулях требуют пересборки.

Если после всех этих шагов ошибка остаётся — проверьте, не дублируется ли у вас импорт HttpClientModule в нескольких модулях. Это может привести к конфликтам. В идеале — импортируйте его только в корневой AppModule.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';

import { AppComponent } from './app.component';
import { DataService } from './data.service';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    provideHttpClient(),  // вместо HttpClientModule в imports
    DataService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }