Solvedangular No provider for HttpClient!

After upgrading from angular 4.4 to 5.0 and after updating all HttpModule and Http to HttpClientModule i started to get this error.

I also added HttpModule again to be sure its not due some dependency but it doesnt resolves the issue

in app.module, i have all correctly set

import { HttpModule } from '@angular/http';
import { HttpClientModule, HttpClient } from '@angular/common/http';
.
.
.
@NgModule({
    imports: [
        BrowserModule,
        HttpClientModule,
        HttpModule,
        BrowserAnimationsModule,
        FormsModule,
        AppRoutingModule,
.
.
.

I dont know from where this error is coming, or i have no clue how to get inner of it. I also have a warning (put it below too) maybe its related.

Error: StaticInjectorError[HttpClient]: 
  StaticInjectorError[HttpClient]: 
    NullInjectorError: No provider for HttpClient!
    at _NullInjector.get (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRlEHwg:5665)
    at resolveToken (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRlEHwg:5953)
    at tryResolveToken (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRlEHwg:5895)
    at StaticInjector.get (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRlEHwg:5766)
    at resolveToken (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRlEHwg:5953)
    at tryResolveToken (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRlEHwg:5895)
    at StaticInjector.get (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRlEHwg:5766)
    at resolveNgModuleDep (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRlEHwg:15328)
    at _createClass (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRlEHwg:15373)
    at _createProviderInstance$1 (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRlEHwg:15339)

Warning Message:

./node_modules/@angular/Common/esm5/http.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* D:\XXX\node_modules\@angular\Common\esm5\http.js
    Used by 21 module(s), i. e.
    D:\XXX\node_modules\awesome-typescript-loader\dist\entry.js?silent=true!D:\XXX\node_modules\angular2-template-loader\index.js!D:\XXX\ClientApp\app\services\notification-endpoint.service.ts
* D:\XXX\node_modules\@angular\common\esm5\http.js
    Used by 1 module(s), i. e.
    D:\XXX\node_modules\awesome-typescript-loader\dist\entry.js?silent=true!D:\XXX\node_modules\angular2-template-loader\index.js!D:\XXX\ClientApp\app\app.module.ts
 @ ./node_modules/@angular/Common/esm5/http.js
 @ ./ClientApp/app/services/notification-endpoint.service.ts
 @ ./ClientApp/app/app.module.ts
 @ ./ClientApp/boot.browser.ts
 @ multi event-source-polyfill webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./ClientApp/boot.browser.ts

Current behavior

StaticInjectorError[HttpClient]: StaticInjectorError[HttpClient]: NullInjectorError: No provider for HttpClient!

Environment

Angular version: 5.0.0 and 5.0.1 (also 5.1 beta)

Browser:
- all

For Tooling issues:
- Node version: 8.5.0
- Platform:  windows
24 Answers

✔️Accepted Answer

If you are using angular v5 version, import HttpClientModule in your app.module.ts after HttpModule.

import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

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

This fixed the issue for me

Other Answers:

I've used HttpModule in app.module.ts after importing the httpmodule and it resolved my issue

import HttpClientModule in App Module and list that in imports.

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

and then
imports: [
HttpClientModule
],;

To fix this on .spec.ts file

import { TestBed, inject } from '@angular/core/testing';

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

import { ApiService } from './api.service';

describe('ApiService', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [ApiService],
imports: [ HttpClientModule ]
});
});

it('should be created', inject([ApiService], (service: ApiService) => {
expect(service).toBeTruthy();
}));
});

@ChakrapaniKulkarni has the right solution while using HttpClient we have to import HttpClientModule from @angular/common/http
Also keep in mind that by default http.get() return observable already converted in json so no furthur need to use rxjs/add/operator/map. subscribe it directly.

More Issues: