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

Question

code_learner53 · 09.05.2026

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

Привет! Я новичок в Angular и TypeScript. Пытаюсь сделать HTTP-запрос к API в своём приложении, но при запуске получаю ошибку: ``` NullInjectorError: No provider for HttpClient! ``` Вот мой код. Сервис `DataService`: ```typescript import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable() export class DataService { constructor(private http: HttpClient) {} getPosts() { return this.http.get('https://jsonplaceholder.typicode.com/posts'); } } ``` Компонент `AppComponent`: ```typescript import { Component, OnInit } from '@angular/core'; import { DataService } from './data.service'; @Component({ selector: 'app-root', template: '

' }) export class AppComponent implements OnInit { posts: any[] = []; constructor(private dataService: DataService) {} ngOnInit() { this.dataService.getPosts().subscribe((data: any) => { this.posts = data; }); } } ``` Мой `app.module.ts`: ```typescript import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { DataService } from './data.service'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule], providers: [DataService], bootstrap: [AppComponent] }) export class AppModule {} ``` Я зарегистрировал `DataService` в `providers`, но ошибка всё равно появляется. Что я упускаю? Как правильно подключить `HttpClient` в Angular? <<>>

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

Ошибка No provider for HttpClient возникает, потому что вы используете HttpClient в сервисе DataService, но не импортировали модуль HttpClientModule в корневой модуль приложения. В Angular все провайдеры (в том числе для HttpClient) должны быть зарегистрированы через модули. HttpClient предоставляется модулем HttpClientModule из пакета @angular/common/http.

Решение

Добавьте HttpClientModule в массив imports вашего AppModule. Вот исправленный код:

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 {}

Почему это работает?

HttpClientModule — это модуль Angular, который регистрирует HttpClient и все связанные с ним провайдеры (например, перехватчики, бэкенд-конфигурацию).
Без его импорта Angular Dependency Injection не знает, как создать экземпляр HttpClient, поэтому выбрасывает ошибку NullInjectorError.
Обратите внимание: HttpClient не нужно добавлять в providers — он автоматически становится доступен через модуль.

Дополнительные рекомендации

Убедитесь, что вы используете HttpClientModule только в корневом модуле (или в модуле, который импортируется в корневой). Если вы используете ленивую загрузку модулей, лучше импортировать HttpClientModule в корневой модуль, чтобы не дублировать его.
Проверьте версию Angular: HttpClient появился с Angular 4.3+. Если у вас старая версия, используйте HttpModule из @angular/http (устаревший).
Для работы с типами данных рекомендую заменить any[] на интерфейс, например:

export interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

// В компоненте:
posts: Post[] = [];

Полный пример рабочего кода

После исправления ваш app.module.ts будет выглядеть так, как показано выше. Сервис и компонент остаются без изменений. Теперь при запуске приложения ошибка исчезнет, и вы увидите список постов.

Если ошибка всё ещё появляется, проверьте:

Что вы импортировали HttpClientModule именно из @angular/common/http (не путайте с @angular/common).
Что ваш сервис объявлен с декоратором @Injectable() — это необходимо для внедрения зависимостей.
Что в ngOnInit вы подписываетесь на Observable (как у вас) — не забудьте отписаться для предотвращения утечек памяти (можно использовать async пайп или оператор takeUntil).

<<>>

Альтернативный подход: использование HttpClient через отдельный модуль

Если ваше приложение большое и вы хотите изолировать HTTP-логику, можно создать отдельный модуль CoreModule, который будет импортировать HttpClientModule и предоставлять сервисы. Это улучшает архитектуру и тестируемость.

// core.module.ts
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { DataService } from './data.service';

@NgModule({
  imports: [HttpClientModule],
  providers: [DataService]
})
export class CoreModule { }

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CoreModule } from './core/core.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, CoreModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

Что делать, если ошибка остаётся?

Проверьте, не забыли ли вы импортировать HttpClientModule в тестовом модуле (TestBed.configureTestingModule), если ошибка возникает в тестах.
Если вы используете Angular Universal или серверный рендеринг, может потребоваться HttpClientXsrfModule или другие конфигурации — но для простых случаев достаточно HttpClientModule.
Перезапустите сервер разработки — иногда ошибка кешируется.

0 ответов