Getting error as "NullInjectorError: StaticInjectorError(AppModule)[ContactService -> HttpHeaders]"

Question

I tried all the possible solutions like importing HttpClientModule in app.module.ts and all the suggestions given when I searched for this error message, but nothing solves my issues. Did I miss any settings in .ts files.

//contact.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';
import { Contact } from './contact';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';


@Injectable({
  providedIn: 'root'
})
export class ContactService {

  constructor(private http:HttpClient, headers:HttpHeaders) { }

  //retrewing contacts
  getContacts(){
    return this.http.get('http://localhost:3000/api/contacts')
    .pipe(map(res => res));    
  }

  // Adding contacts
  addContacts(newContact){
    var headers = new HttpHeaders();
    headers.append('Content-Type','application/json');
    return this.http.post('http://localhost:3000/api/add',newContact, {headers:headers})
    .pipe(map(res => res));  
  }

  //delete contacts
  deleteContacts(id){
      return this.http.delete('http://localhost:3000/api/delete'+id)
      .pipe(map(res => res));  
  }
}

My contacts.component.ts

import { Component, OnInit } from '@angular/core';
import { ContactService } from '../contact.service';
import { Contact } from '../contact';
import { HttpClientModule } from '@angular/common/http';

@Component({
  selector: 'app-contacts',
  templateUrl: './contacts.component.html',
  styleUrls: ['./contacts.component.css'],
  providers: [ContactService]
})
export class ContactsComponent implements OnInit {
  contacts : any;
  contact : Contact;
  first_name : string;
  last_name : string;
  phone_no  : string;

  constructor(private contactService:ContactService) { }

  ngOnInit() {
    this.contactService.getContacts()
    .subscribe(contacts=>
      this.contacts = contacts);

  }

}

My app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ContactsComponent } from './contacts/contacts.component';
import { HttpClientModule } from '@angular/common/http';
import { HttpClient } from '@angular/common/http';


@NgModule({
  declarations: [
    AppComponent,
    ContactsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [HttpClientModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

I have added httpclientmodule in all of the above, but still am getting an error message, Do I need to add any more settings.

Answer 1

There is no provider for HttpHeaders . You don't inject instances of HttpHeaders , you just create instances as you need them, which you are already doing.

You can fix this problem by removing the injected HttpHeaders from the ContactService constructor.

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