How to fix NullInjectorError: No provider for HttpClient!
Jasmine is a Behavior Driven Development testing framework for JavaScript. It does not rely on browsers, DOM, or any JavaScript framework. Thus it’s suited for websites, Node.js projects, or anywhere that JavaScript can run.
How to reproduce it
*.service.spec.ts
...
beforeEach(() => {
TestBed.configureTestingModule({
});
service = TestBed.inject(Service);
});
...*.component.spec.ts
...
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ SignupComponent ],
imports: [ ReactiveFormsModule ]
})
.compileComponents();
fixture = TestBed.createComponent(Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
...Error
NullInjectorError: R3InjectorError(DynamicTestModule)[Service -> HttpClient -> HttpClient]:
NullInjectorError: No provider for HttpClient!Solution
Add providers to the *.service.spec.ts – providers: [ HttpClient, HttpHandler ]
...
beforeEach(() => {
TestBed.configureTestingModule({
providers: [ HttpClient, HttpHandler ]
});
service = TestBed.inject(Service);
});
...Import HttpClientModule to the app.component.spec.ts and nested components that use HttpClient.
*.component.spec.ts
...
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ SignupComponent ],
imports: [ ReactiveFormsModule, HttpClientModule ]
})
.compileComponents();
fixture = TestBed.createComponent(SignupComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
...
