HttpClientTestingModule is deprecated, how to replace it?

Question

After upgrading my application to Angular 18.0.4, my test classes say:

'HttpClientTestingModule' is deprecated. Add provideHttpClientTesting() to your providers instead.

Therefore I adapted my code as follows:

        await TestBed.configureTestingModule(
            {
                imports: [
                    AssetDetailsComponent,
                ],
                providers: [
                    // replacement for HttpClientTestingModule:
                    provideHttpClientTesting() 
                ]
            })
            .compileComponents();

However, when I run the tests, I get the following error:

NullInjectorError: R3InjectorError(Standalone[AssetDetailsComponent])[InventoryActionService -> InventoryActionService -> _HttpClient -> _HttpClient]:
      NullInjectorError: No provider for _HttpClient!

If I use provideHttpClient() instead of provideHttpClientTesting() it works, yet I doubt that this is best practice. What is the correct solution to this issue?

bleistift2 · Accepted Answer · 2025-11-11 00:52:14Z

64

Also add provideHttpClient() before provideHttpClientTesting()

import { provideHttpClient } from '@angular/common/http'
import { provideHttpClientTesting } from '@angular/common/http/testing'

providers: [
   provideHttpClient(),
   provideHttpClientTesting() 
]

As mentioned in the docs.

edited Nov 11 at 0:52

bleistift2

5375 silver badges17 bronze badges

answered Jun 21, 2024 at 18:11

Matthieu Riegler

59.8k27 gold badges158 silver badges208 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Winnemucca Jul 1 at 18:08

so we can still make a httpClientTestingController with this? let httpTestingController: HttpTestingController;

Gregg L Sep 4 at 20:42

One of our test classes is able to utilize (get from the TestBed) a httpTestingController, simply by calling TestBed.inject(HttpTestingController), even when using provideHttpClient() and provideHttpClientTesting(). Not sure if that is exactly your use case though?

Selaka Nanayakkara · Accepted Answer · 2024-06-21 18:15:40Z

13

You need provideHttpClient() alsom Since provideHttpClientTesting() configures env but does not provide httpClient, Include provideHttpClient() like below:

import { TestBed } from '@angular/core/testing';
import { AssetDetailsComponent } from './asset-details.component';
import { provideHttpClient } from '@angular/common/http';
import { provideHttpClientTesting } from '@angular/common/http/testing';
   

await TestBed.configureTestingModule({
  imports: [
    AssetDetailsComponent,
  ],
  providers: [        
    provideHttpClient(), // Provide the HttpClient along with HttpClientTesting
    provideHttpClientTesting(),
  ]
}).compileComponents();

answered Jun 21, 2024 at 18:15

Selaka Nanayakkara

6,9963 gold badges27 silver badges60 bronze badges

Comments

Akib · Accepted Answer · 2025-09-02 10:03:08Z

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

interface User {
  id: number;
  name: string;
}

class UserService {
  constructor(private http: HttpClient) {}

  getUsers() {
    return this.http.get<User[]>('/api/users');
  }
}

describe('UserService', () => {
  let service: UserService;
  let httpTestingController: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        UserService,
        provideHttpClient(),
        provideHttpClientTesting()
      ]
    });

    service = TestBed.inject(UserService);
    httpTestingController = TestBed.inject(HttpTestingController);
  });

  afterEach(() => {
    httpTestingController.verify();
  });

  it('should fetch users', () => {
    const mockUsers: User[] = [
      { id: 1, name: 'John' },
      { id: 2, name: 'Jane' }
    ];

    service.getUsers().subscribe(users => {
      expect(users).toEqual(mockUsers);
    });

    const req = httpTestingController.expectOne('/api/users');
    expect(req.request.method).toEqual('GET');
    req.flush(mockUsers);
  });
});

Credit

Collectives™ on Stack Overflow

HttpClientTestingModule is deprecated, how to replace it?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related