No provider for HttpClient

Question

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 it s not due to some dependency but it doesn t resolve 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 don t 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 amp 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        name    X      version    1 0 0      description    X      author          name    X X        email    XX        url    X          homepage    X      dependencies           angular animations     5 1 0-beta 0         angular common     5 1 0-beta 0         angular compiler     5 1 0-beta 0         angular compiler-cli     5 1 0-beta 0         angular core     5 1 0-beta 0         angular forms     5 1 0-beta 0         angular http     5 1 0-beta 0         angular platform-browser     5 1 0-beta 0         angular platform-browser-dynamic     5 1 0-beta 0         angular platform-server     5 1 0-beta 0         angular router     5 1 0-beta 0         ngtools webpack     1 8 0         ngx-translate core     8 0 0         ngx-translate http-loader     2 0 0         swimlane ngx-datatable     11 0 3         types jquery     3 2 16         types webpack-env     1 13 2        angular2-template-loader     0 6 2        aspnet-webpack     2 0 1        awesome-typescript-loader     3 3 0        bootstrap     3 3 7        bootstrap-datepicker     1 7 1        bootstrap-select     1 12 4        bootstrap-toggle     2 2 2        bootstrap-vertical-tabs     1 2 2        chart js     2 7 1        core-js     2 5 1        css     2 2 1        css-loader     0 28 7        event-source-polyfill     0 0 11        expose-loader     0 7 3        extract-text-webpack-plugin     3 0 2        file-loader     1 1 5        font-awesome     4 7 0        html-loader     0 5 1        jquery     3 2 1        json-loader     0 5 7        ng2-charts     1 6 0        ng2-toasty     4 0 3        ngx-bootstrap     2 0 0-beta 8        node-sass     4 6 0        popper js     1 12 6        raw-loader     0 5 1        rxjs     5 5 2        sass-loader     6 0 6        style-loader     0 19 0        to-string-loader     1 1 5        typescript     2 6 1        url-loader     0 6 2        web-animations-js     2 3 1        webpack     3 8 1        webpack-hot-middleware     2 20 0        webpack-merge     4 1 1        zone js     0 8 18          devDependencies           types chai     4 0 4         types jasmine     2 6 3        chai     4 1 2        jasmine-core     2 8 0        karma     1 7 1        karma-chai     0 1 0        karma-chrome-launcher     2 2 0        karma-cli     1 0 1        karma-jasmine     1 1 0        karma-jasmine-html-reporter     0 2 2        karma-webpack     2 0 5          scripts          dev-build    node node modules webpack bin webpack js --config webpack config vendor js        test    karma start ClientApp test karma conf js          webpack config js  const path   require  path    const webpack   require  webpack    const merge   require  webpack-merge    const AotPlugin   require   ngtools webpack   AotPlugin  const CheckerPlugin   require  awesome-typescript-loader   CheckerPlugin   module exports    env    gt           Configuration in common to both client-side and server-side bundles     const isDevBuild     env  amp  amp  env prod       const sharedConfig             stats    modules  false            context    dirname          resolve    extensions     js     ts              output                filename    name  js               publicPath   dist      Webpack dev middleware  if enabled  handles requests for this URL prefix                    module                rules                      test     ts    use  isDevBuild     awesome-typescript-loader silent true    angular2-template-loader       ngtools webpack                       test     html    use   html-loader minimize false                       test     css    use    to-string-loader   isDevBuild    css-loader     css-loader minimize                        test     scss    use    to-string-loader   isDevBuild    css-loader     css-loader minimize    sass-loader                        test      png jpg jpeg gif svg     use   url-loader limit 25000                                     plugins   new CheckerPlugin                   Configuration for client-side bundle suitable for running in browsers     const clientBundleOutputDir      wwwroot dist       const clientBundleConfig   merge sharedConfig            entry     main-client      ClientApp boot browser ts             output    path  path join   dirname  clientBundleOutputDir             plugins                new webpack DllReferencePlugin                   context    dirname                  manifest  require    wwwroot dist vendor-manifest json                            concat isDevBuild                    Plugins that apply in development builds only             new webpack SourceMapDevToolPlugin                   filename    file  map      Remove this line if you prefer inline source maps                 moduleFilenameTemplate  path relative clientBundleOutputDir    resourcePath       Point sourcemap entries to the original file locations on disk                                                 Plugins that apply in production builds only                 new webpack optimize UglifyJsPlugin                    new AotPlugin                       tsConfigPath     tsconfig json                       entryModule  path join   dirname   ClientApp app app module AppModule                                                  return  clientBundleConfig        webpack config vendor js  const path   require  path    const webpack   require  webpack    const ExtractTextPlugin   require  extract-text-webpack-plugin    const merge   require  webpack-merge    const treeShakableModules           angular animations         angular common         angular compiler         angular core         angular forms         angular http         angular platform-browser         angular platform-browser-dynamic         angular router        zone js      const nonTreeShakableModules          bootstrap        core-js client shim        web-animations-js        event-source-polyfill        jquery         swimlane ngx-datatable release assets icons css        ng2-toasty        ng2-toasty bundles style-bootstrap css        ng2-charts        ngx-bootstrap modal        ngx-bootstrap tooltip        ngx-bootstrap popover        ngx-bootstrap dropdown        ngx-bootstrap carousel        bootstrap-vertical-tabs bootstrap vertical-tabs css        bootstrap-toggle css bootstrap-toggle css        bootstrap-toggle js bootstrap-toggle js        bootstrap-select dist css bootstrap-select css        bootstrap-select dist js bootstrap-select js        bootstrap-datepicker dist css bootstrap-datepicker3 css        font-awesome css font-awesome css     const allModules   treeShakableModules concat nonTreeShakableModules    module exports    env    gt        const extractCSS   new ExtractTextPlugin  vendor css        const isDevBuild     env  amp  amp  env prod       const sharedConfig             stats    modules  false            resolve    extensions     js              module                rules                      test      gif png woff woff2 eot ttf svg          use   url-loader limit 100000                                     output                publicPath   dist                filename    name  js               library    name   hash                      plugins                new webpack ProvidePlugin       jquery   jQuery   jquery         Maps these identifiers to the jQuery package  because Bootstrap expects it to be a global variable              new webpack ContextReplacementPlugin    angular b   b bundles linker    path join   dirname     ClientApp        Workaround for https   github com angular angular issues 11580             new webpack ContextReplacementPlugin  angular       core        angular   path join   dirname     ClientApp        Workaround for https   github com angular angular issues 14898             new webpack IgnorePlugin   vertx       Workaround for https   github com stefanpenner es6-promise issues 100                       const clientBundleConfig   merge sharedConfig            entry                   To keep development builds fast  include all vendor dependencies in the vendor bundle                 But for production builds  leave the tree-shakable ones out so the AOT compiler can produce a smaller bundle              vendor  isDevBuild   allModules   nonTreeShakableModules                    output    path  path join   dirname   wwwroot    dist              module                rules                      test     css         use  extractCSS extract   use  isDevBuild    css-loader     css-loader minimize                                        plugins                extractCSS              new webpack DllPlugin                   path  path join   dirname   wwwroot    dist     name -manifest json                    name    name   hash                            concat isDevBuild                      new webpack optimize UglifyJsPlugin                           return  clientBundleConfig

User · Answer

I was also facing similar issue by doing below changes, it worked for me

In app.modules.ts

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

and in corresponding service class

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

constructor should look like as below

constructor(private http: HttpClient, private xyz: xyzService) {}

In test file

import { HttpClientTestingModule } from '@angular/common/http/testing'

  beforeEach(() => TestBed.configureTestingModule({
    imports: [HttpClientTestingModule]
  }));

User · Answer

In my case I found once I rebuild the app it worked    I had imported the HttpClientModule as specified in the previous posts but I was still getting the error  I stopped the server  rebuilt the app  ng serve  and it worked

User · Answer

In my case  the error occured when using a service from an angular module located in an npm package  where the service requires injection of HttpClient  When installing the npm package  a duplicate node modules directory was created inside the package directory due to version conflict handling of npm  engi-sdk-client is the module containing the service      Obviously  the dependency to HttpClient is not resolved correctly  as the locations of HttpClientModule injected into the service  lives in the duplicate node modules directory  and the one injected in app module  the correct node modules  don t match   I ve also had this error in other setups containing a duplicate node modules directory due to a wrong npm install call   This defective setup also leads to the described runtime exception No provider for HttpClient        TL DR  Check for duplicate node modules directories  if none of the   other solutions work

User · Answer

I had same issue  After browsing and struggling with issue found the below solution   import   HttpModule   from   angular http   import   HttpClientModule   from   angular common http    imports      HttpModule    HttpClientModule     Import HttpModule and HttpClientModule in app module ts and add into the imports like mentioned above

User · Answer

Just Add HttpClientModule in  imports  array of app module ts file      import  HttpClientModule  from   angular common http      add this line  NgModule     declarations        AppComponent      HeaderComponent        imports        BrowserModule      HttpClientModule    add this line        providers        bootstrap   AppComponent     export class AppModule      and then you can use HttpClient in your project through constructor injection   import  HttpClient  from   angular common http        export class Services    constructor private http  HttpClient

User · Answer

Add HttpModule and HttpClientModule in both imports and providers in app module ts solved the issue  imports -  import  HttpModule  from   angular http   import  HttpClientModule  from   angular common http

User · Answer

I was facing the same problem  then in my app module ts I updated the file this way   import   HttpModule   from   angular http   import   HttpClientModule   from   angular common http     and in the same file  app module ts  in my  NgModule imports  array I wrote this way   HttpModule  HttpClientModule

User · Answer

In angular github page  this problem was discussed and found solution   https   github com angular angular issues 20355

User · Answer

You have not provided providers in your module      lt strike gt import   HttpModule   from   angular http   lt  strike gt  import   HttpClientModule  HttpClient   from   angular common http     NgModule     imports        BrowserModule      HttpClientModule      BrowserAnimationsModule      FormsModule      AppRoutingModule        providers    HttpClientModule                    export class MyModule                 Using HttpClient in Tests  You will need to add the HttpClientTestingModule to the TestBed configuration when running ng test and getting the  No provider for HttpClient  error      Http testing module and mocking controller import   HttpClientTestingModule  HttpTestingController   from   angular common http testing       Other imports import   TestBed   from   angular core testing   import   HttpClient  HttpErrorResponse   from   angular common http    describe  HttpClient testing        gt      let httpClient  HttpClient    let httpTestingController  HttpTestingController     beforeEach      gt        TestBed configureTestingModule         imports    HttpClientTestingModule                   Inject the http service and test controller for each test     httpClient   TestBed get HttpClient       httpTestingController   TestBed get HttpTestingController            it  works        gt

User · Answer

I was facing the same issue  the funny thing was I had two projects opened on simultaneously  I have changed the wrong app modules ts files   First  check that   After that change add the following code to the app module ts file  import   HttpClientModule   from   angular common http     After that add the following to the imports array in the app module ts file    imports        HttpClientModule             Now you should be ok

User · Answer

I found slimier problem  Please import the HttpClientModule in your app module ts file as follow   import   BrowserModule   from   angular platform-browser   import   NgModule   from   angular core    import   AppComponent   from    app component   import   HttpClientModule   from   angular common http     NgModule     declarations        AppComponent     imports        BrowserModule      HttpClientModule        providers        bootstrap   AppComponent     export class AppModule

User · Answer

In my case  I was using a service in a sub module  NOT the root AppModule   and the HttpClientModule was imported only in the module   So I have to modify the default scope of the service  by changing  providedIn  to  any  in the  Injectable decorator   By default  if you using angular-cli to generate the service  the  providedIn  was set to  root    Hope this helps

User · Answer

I got this error after injecting a Service which used HTTPClient into a class  The class was again used in the service  so it created a circular dependency  I could compile the app with warnings  but in browser console the error occurred    No provider for HttpClient   MyService -  HttpClient    and it broke the app   This works   import   HttpClient  HttpClientModule  HttpHeaders   from   angular common http   import   MyClass   from     classes my class     Injectable   export class MyService     constructor      private http  HttpClient             do something with myClass Instances                   export class MenuItem     constructor             This breaks the app  import   HttpClient  HttpClientModule  HttpHeaders   from   angular common http   import   MyClass   from     classes my class     Injectable   export class MyService     constructor      private http  HttpClient             do something with myClass Instances                   import   MyService   from     services my service   export class MyClass     constructor      let injector   ReflectiveInjector resolveAndCreate  MyService        this myService   injector get MyService             After injecting MyService in MyClass I got the circular dependency warning  CLI compiled anyway with this warning but the app did not work anymore and the error was given in browser console  So in my case it didn t had to do anything with  NgModule but with circular dependencies  I recommend to solve the case sensitive naming warnings if your problem still exist

User · Answer

To resolve this problem HttpClient is Angular s mechanism for communicating with a remote server over HTTP  To make HttpClient available everywhere in the app   open the root AppModule   import the HttpClientModule from  angular common http  import   HttpClientModule   from   angular common http    add it to the  NgModule imports array  imports  HttpClientModule

User · Answer

I had similar problem  For me the fix was to import HttpModule before HttpClient Module   import   HttpModule   from   angular http   import   HttpClientModule   from   angular common http         imports      BrowserModule    HttpModule    HttpClientModule

User · Answer

adding HttpClientModule in app module ts file in import section fixed my issue

User · Answer

Just import the HttpModule and the HttpClientModule only   import   HttpModule   from   angular http   import   HttpClientModule   from   angular common http     No need for the HttpClient

User · Answer

You are getting error for HttpClient so  you are missing HttpClientModule for that   You should import it in app module ts file like this -  import   HttpClientModule   from   angular common http     and mention it in the NgModule Decorator like this -   NgModule       imports   HttpClientModule            If this even doesn t work try clearing cookies of the browser and try restarting your server  Hopefully it may work  I was getting the same error

User · Answer

Go to app module ts import import   HttpClientModule   from   angular common http   AND Add HttpClientModule under imports should look like this imports   BrowserModule  IonicModule forRoot    AppRoutingModule HttpClientModule

[angular] No provider for HttpClient

Examples related to angular

Examples related to typescript