Нет провайдера для HttpClient

Чтобы решить эту проблему, HttpClient является механизмом Angular для общения с удалённым сервером через HTTP.

Чтобы сделать HttpClient доступным везде в приложении, выполните следующие шаги:

1. Откройте корневой модуль AppModule.

2. Импортируйте HttpClientModule из @angular/common/http:

   import { HttpClientModule } from '@angular/common/http';
   

3. Добавьте его в массив @NgModule.imports:

   imports: [HttpClientModule,]
   

Теперь HttpClient будет доступен для использования в вашем приложении.

Вы не предоставили провайдеры в вашем модуле. В коде, который вы представили, используется HttpClientModule, но он должен быть в массиве providers, как это показано ниже. Однако, на самом деле, HttpClientModule не нужно добавлять в providers, так как он уже является модулем, который предоставляет HttpClient:

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    BrowserAnimationsModule,
    FormsModule,
    AppRoutingModule
  ],
  // Уберите HttpClientModule из массива providers
  providers: [ /* Ваши сервисы */ ]
  // ...
})
export class MyModule { /* ... */ }

Использование HttpClient в тестах

Если вы получаете ошибку "No provider for HttpClient" при запуске ng test, вам нужно добавить HttpClientTestingModule в конфигурацию TestBed:

import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { TestBed } from '@angular/core/testing';
import { HttpClient } from '@angular/common/http';

describe('Тестирование HttpClient', () => {
  let httpClient: HttpClient;
  let httpTestingController: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [ HttpClientTestingModule ]
    });

    // Внедряем http сервис и тестовый контроллер для каждого теста
    httpClient = TestBed.get(HttpClient);
    httpTestingController = TestBed.get(HttpTestingController);
  });

  it('работает', () => {
    // Ваш тест
  });
});

Убедитесь, что вы добавили HttpClientTestingModule в imports, чтобы избежать ошибок при тестировании.

С недавними изменениями в Angular (Angular 17) больше нет файла app.module. Теперь вам нужно обновить конфигурацию в файле app.config и добавить provideHttpClient(). Вот пример кода:

import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import { provideRouter, withHashLocation } from '@angular/router';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, withHashLocation()),
    provideHttpClient()
  ]
};

Если вам нужно добавить интерсептор для аутентификации, вы можете сделать это следующим образом:

import { ApplicationConfig } from '@angular/core';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { provideRouter, withHashLocation } from '@angular/router';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, withHashLocation()),
    provideHttpClient(withInterceptors([authenticationInterceptor]))
  ]
};

Интерсептор можно объявить так:

import { HttpHandlerFn, HttpInterceptorFn, HttpRequest } from "@angular/common/http";

export const authenticationInterceptor: HttpInterceptorFn = (req: HttpRequest<unknown>, next: HttpHandlerFn) => {
    const modifiedReq = req.clone({
        headers: req.headers.set('Authorization', `Bearer ${sessionStorage.getItem('token')}`),
    });

    return next(modifiedReq);
};

Таким образом, вы можете настроить использование HTTP-клиента и настроить интерсепторы в новом формате конфигурации приложения в Angular 17.

Вы получаете ошибку для HttpClient, потому что не хватает модуля HttpClientModule.

Вам следует импортировать его в файл app.module.ts следующим образом:

import { HttpClientModule } from '@angular/common/http';

И укажите его в декораторе NgModule следующим образом:

@NgModule({
...
imports: [ HttpClientModule ]
...
})

Если это не поможет, попробуйте очистить куки браузера и перезапустить сервер. Надеюсь, это сработает, у меня была такая же проблема.

Чтобы использовать HttpClient в вашем приложении Angular, просто добавьте HttpClientModule в массив imports файла app.module.ts.

Пример кода:

...
import { HttpClientModule } from '@angular/common/http'; // добавьте эту строку
@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule, // добавьте эту строку
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

После этого вы сможете использовать HttpClient в вашем проекте через внедрение зависимостей в конструктор:

import { HttpClient } from '@angular/common/http';

export class Services {
  constructor(private http: HttpClient) {}
}

Теперь вы готовы использовать HttpClient для работы с HTTP-запросами в вашем приложении!