How to import HttpClientModule in app.module.ts without getting StaticInjection error?

Question

I am trying to move away from old angular way of making http calls . I am migrating from angular 4 to 5 . In my app.module.ts , I have made the necessary changes as below :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
...................................................

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

But when I delete the HTTP module references and import the HTTPClient Module references , I get the errors down below :

   StaticInjectorError[Http]: 
  StaticInjectorError[Http]: 
    NullInjectorError: No provider for Http!
   Error: StaticInjectorError[Http]: 
  StaticInjectorError[Http]: 
    NullInjectorError: No provider for Http!


Unhandled Promise rejection: StaticInjectorError[Http]: 
  StaticInjectorError[Http]: 
    NullInjectorError: No provider for Http! ; Zone: <root> ; Task: Promise.then ; Value: Error: StaticInjectorError[Http]: 
  StaticInjectorError[Http]: 
    NullInjectorError: No provider for Http! Error: StaticInjectorError[Http]: 
  StaticInjectorError[Http]: 
    NullInjectorError: No provider for Http!
   at _NullInjector.prototype.get (http://localhost:4200/vendor.bundle.js:99248:13)
   at resolveNgModuleDep (http://localhost:4200/vendor.bundle.js:108909:5)
  

  NullInjectorError: No provider for Http!
   at _NullInjector.prototype.get (http://localhost:4200/vendor.bundle.js:99248:13)
   at resolveToken (http://localhost:4200/vendor.bundle.js:99536:9)
   at tryResolveToken (http://localhost:4200/vendor.bundle.js:99478:9)
   at StaticInjector.prototype.get (http://localhost:4200/vendor.bundle.js:99349:13)
   at _createProviderInstance$1 (http://localhost:4200/vendor.bundle.js:108920:13)",
      Symbol(observable)_h.ole4xhx75kj: undefined,
      Symbol(rxSubscriber)_g.ole4xhx75kj: undefined
   }
  

I am also using rxjs version : ^5.5.2 I am working with below angular versions :

devDependencies:
"@angular/cli": "1.4.7",
"@angular/compiler-cli": "^5.0.0",
------------------------------------------
dependencies:
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",

Can someone please advise me as to where I am going wrong ?

EDIT: Throughout the application all the instances of http have been changed to httpClientin all the applicable ts files. Yet , once the HTTP Module is deleted from app.module.ts and is replaced by HTTPClient Module, then we see the issues depicted in the question up above . Currently the application is loading up when both the legacy HTTP Module and HTTPClient Module are present . If any one of them is removed, I start getting errors .